Why does this CSS margin-top style not work?

by

I try to add margin values on a div inside another div. All works fine except the top value, it seems to be ignored. But why?

What I expected:
What I expected with margin:50px 50px 50px 50px;

What I get:
What I get with margin:50px 50px 50px 50px;

Code:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}
<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools have no explanation to why margin behave this way.

13 Answers
13

Leave a Comment