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
  • 21,330
  • 14
  • 61
  • 67
Sean
  • 7,216
  • 9
  • 26
  • 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
  • 4,984
  • 2
  • 31
  • 43