advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

1man on 01/29/08


Tagged

css margin top container


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

jonhenshaw
basicmagic


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.

Plain TextExpand 
  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.