Posted By

1man on 01/29/08


Tagged

css margin top container


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

jonhenshaw
basicmagic
annalog
mhulse
deonoise


CSS Collapsible Margins Fix (margin-top)


 / Published in: CSS
 

A very annoying 'bug' can occur when you are applying a top margin to an element inside a container. The inner elements margin seems to "leak" out of the top of the container. This pushes the container down, and looks very messy if you have a background applied.

Note: This is NOT and bug! Yay etc..

A quick fix is to add a padding of 1px, and a margin of -1px. Or you could add a border to the container.

  1. #containerDiv {
  2. width: 700px;
  3. padding-top: 1px;/*important*/
  4. margin-top: -1px;/*important*/
  5. }
  6. #innerDiv {
  7. width: 200px;
  8. margin: 20px 0 0;/*You can now apply a top margin without trouble*/
  9. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: LadynRed on March 3, 2008

Margin collapse is NOT a bug at all. http://www.complexspiral.com/publications/uncollapsing-margins/ http://reference.sitepoint.com/css/collapsingmargins

You need to login to post a comment.