Search code examples
csspositioningmargin

CSS Negative margins for positioning

Is it ok to use negative margins for positioning? I have a lot in my current site and feel like it's not such a stable way to position things. I usually suggest to use them too.

For example I have a checkout page with three divs on top of each other 

<div class="A">
   header
</div>
<div class="B">
   content
</div>
<div class="C">
   footer
</div>

(A, B and C), which are meant to sit on top of each other, to appear attached. I did this using: 

.B
{
    margin-top: -20px;
}

On div B, to meet the bottom of div A.

Is this good practice or shall I re-code using top and left?

Solution

  • If your divs have some margin between each other probably you didn't reset your margins and padding (see: http://meyerweb.com/eric/tools/css/reset/).

    Generally speaking is not a bad thing to use negative margins, anyway if you are forced to set them almost everywhere probably you should refactor your css, because the result can be slightly different among the various browsers and this could lead to a big headache :) .