Advanced Search

CSS Collapsible Margins Fix (margin-top)

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.