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)

Answer 3

This is the jsFiddle with your expectations:

jsFiddle

as you wanted the yellow border be around the whole content so it was better to extend your wrapper height.

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

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

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

Answer 4

You can try like this: Demo

Instead of setting height to #content, you can use it for #box

#content {
  background-color: #0075CF;        
}

#box {margin-bottom: 50px; height: 100px;}

Answer 5

Please check below code

#content {
  background-color: #0075cf;
  height: 100px;
  margin-bottom: 50px;
}

#box{
  /* margin-bottom: 50px; */
}

Answer 6

You should give the margin to #content instead of #box. And if you want to give margin to #box only. Try to give it with minus value i.e. -(50+div height) If div #box height is 150px then use-

#box {
      margin-bottom: -200px;
    } 

Answer 7

Solution 1:

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

Solution 2:

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


  <style>
    #wrapper{
    border: 1px solid #F68004;
    height: 150px;
   }

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

#box{
    /*margin-bottom: 50px;*/
  }
 </style>

Answer 8

try this

CSS

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

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