Grow your CSS skills. Land your dream job.

Negative Padding and Margins

  • # July 29, 2008 at 5:41 am

    Hey all,

    I know its not techically correct, but I was curious, is there any problem with using Negative Padding or margins in sites? like will it break the design in some browsers?

    box
    # July 29, 2008 at 5:47 am

    Negative margins are usually fine, IE6 will often throw up its usual idiosyncrasies with its box-model quirks. Negative Padding however is not allowed so don’t use it.

    There’s a decent box-model article here http://www.w3.org/TR/CSS21/box.html

    # July 29, 2008 at 6:07 am
    "box" wrote:
    Negative margins are usually fine, IE6 will often throw up its usual idiosyncrasies with its box-model quirks. Negative Padding however is not allowed so don’t use it.

    There’s a decent box-model article here http://www.w3.org/TR/CSS21/box.html

    thanks for the advice, just curious though, what is so wrong with Negative padding?

    box
    # July 29, 2008 at 9:17 am

    Margin can position an element, so applying negative margin will pull the object to that negative position. Padding however doesn’t position an element, it merely creates space around that element, so negative padding would be negative space.
    To visualise, imagine you have an image of 100px x 150px, you can’t remove padding from it, it must exist at a minimum of 100px x 150px – you can only add the padding.
    Hope that makes sense – I know what I mean anyway lol

    # July 29, 2008 at 4:17 pm

    thanks it made sense :-)

    # July 30, 2008 at 8:08 pm

    Just one other question on this topic. does anyone know if there is any way to make this work in IE6 and earlier? currently the element only shows up in its correct position in Firefox, safari and IE7

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".