Why does margin-bottom show as margin-top?

Question

I try to add margin-bottom on a div inside parent but it show as parent's margin-top. Why?

HTML:

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

CSS:

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
}

What I expected:

What I get:

Update:

I can fix this but i have no idea why that code not work? can someone explain?

Update 2:

It look like most answer say that it because of margin collapse and my question duplicate with this. But please note that i set margin-bottom but NOT margin-top. I also read about collapsing margins and i can not found any rule say that margin-bottom can become margin-top. Can anyone point me out?

Answer 1

Give margin-bottom: 50px; to #content instead of #box Because you have given height to #content div and here margin collapse.

Here it is explain with example

Updated Fiddle

Answer 2

The reason why the margin appears to be on top is due to margin collapsing:

Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

If you add add a transparent border to your parent div (#content) then your margin will behave:

#wrapper{
  border: 1px solid #F68004;
}

#content{
  border:1px solid transparent;
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
  height:10px; background-color:red;
}

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

If you want the white space at the bottom like in your expected image, just add padding-bottom:50px to #wrapper

Update

Why the margin-bottom is causing margin-top: As the collapsing margin is moving outside your parent div, it becomes margin bottom of the element outside the parent (which is the top border of #wrapper) - which pushes your #content div down (making it look like margin-top)