html css style margin not wrapped

Question

I've some questions about the following css.

.mainform{
  margin:50px 20px;
  background-color:#444;
  width:100%;
  height:80px;
}

.scontainer{
  background-color:#999;
}

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

I've got the following result. The the part of margin hasn't background color,even though the "scontainer" div wraped the "mainform" div.
Why doesn't the margin part of mainform have the background color, though the parent has background color?
Please help me.
Thanks.

http://stackoverflow.com/questions/42022848/why-does-margin-top-not-work-to-get-the-yellow-box-down/42022994#42022994 — linktoahref, Feb 04 '17 at 06:37

score 1 · Answer 1 · answered Feb 04 '17 at 06:38

1

use padding on the parent instead of margin on the child.

look at this snippet:

.mainform{
  background-color:#444;
  width:100%;
  height:80px;
}

.scontainer{
  background-color:#999;
  padding:50px 20px;
}

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

answered Feb 04 '17 at 06:38

Abdelaziz Mokhnache

4,269
3
25
35

When using the "margin", why doesn't the parent have the background color for margin part of the child? – Andrew Li Feb 04 '17 at 06:43
this is called `margin collapsing`, you can read about it on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing – Abdelaziz Mokhnache Feb 04 '17 at 06:57

score 1 · Accepted Answer · answered Feb 04 '17 at 06:43

Add borders to have the clarity on the elements

scontainer has background:gray and it has a mainform child with width 100% and height 80px. mainform is taking margin within scontainer,if there is no border mentioned ,scontainer just has the background-color so only the styles for mainform are displayed, to have the color on the area of margin try adding border as mentioned in the snippet or specify height and width on the scontainer

.mainform{
    margin:50px 20px;
    background-color:#444;
    width:100%;
    height:80px;
  border:1px dashed green;
  }

  .scontainer{
    background-color:gray;
    border:1px solid yellow;
  }

<style>
    
</style>
<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

Hope it helps

score 0 · Answer 3 · answered Feb 04 '17 at 06:57

If your margin background color as your scontainer div color, just assign the scontainer a position of absolute. it will then appear a you want.

<style>

   .mainform{
    margin:50px 20px;
    background-color:#444;
    width:100%;
    height:80px;
  }

  .scontainer{
    background-color:#999;
 width: 100%;
 position: absolute;
  }
</style>


<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

Hope this helps!

score 0 · Answer 4 · answered Feb 04 '17 at 07:00

Add overflow:hidden; in the parent. this is due to block formatting context

.scontainer {
  background-color: #999;
  overflow: hidden;
}
.mainform {
  margin: 50px 20px;
  background-color: #444;
  width: 100%;
  height: 80px;
}

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

html css style margin not wrapped

4 Answers4