0

Curious why the top and bottom margins of 10px are not applied to the inner div in the snippet below. If I set the inner display property to "inline-block" it applies the top/bottom margins as expected.

jsFiddle example

HTML:

<div class="outer">
    <div class="inner">
        My content...
    </div> 
</div>

CSS:

.outer {
    background-color: lightgrey;
}   
.inner {
    background-color: green;
    padding: 50px;
    width: 600px;
    margin:10px;
    display: block; /* No top, bottom margins applied.  Does apply them with "inline-block".  Why? */ 
}
Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
Sean
  • 7,562
  • 10
  • 27
  • 29
  • 2
    Explained pretty well over here: http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work – Joe_G Jul 18 '13 at 19:02

1 Answers1

1

The .inner top margin is collapsing.

An easy fix is to make the outer display:inline-block You should put padding:10px on the outer and no margin on the inner.

missaghi
  • 5,044
  • 2
  • 33
  • 43