Why does margin child element affect body element?

Question

Please can you explain to me why body is affected by the margin of its children ? I don't like this behaviour. In my opinion, the margin of a child div should be computed from the boundaries of its parent to its boundaries.

For example : https://jsfiddle.net/2yejm7L5/

You can see that the div in blue affect the margin of body in green, then you see the html background in red and I don't want that.

In my case, I don't want to edit body CSS properties

[Collapsing Margins](https://drafts.csswg.org/css2/box.html#collapsing-margins) — Alohci, Dec 31 '15 at 18:21

Shaher Jamal Eddin · Accepted Answer · 2016-01-04T15:26:39.790

0

You will achieve your goal, if you modify the body css to the following:

body {
  background-color: green;
  height: 100%;
  width:100%;
  margin:0;
  position: absolute;
}

/* Another technique */ remove top-margin:50px, and wrap your toto div with another div and give it padding-top:50px; as per below:

html {
  background-color: red;
  height: 100%;
}
body {
  background-color: green;
  height: 100%;
  margin:0;
}

#container { padding-top:50px; }

.toto {
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div id="container">
  <div class="toto">

  </div>
</div>

edited Jan 04 '16 at 15:26

answered Dec 31 '15 at 18:22

Shaher Jamal Eddin

462
4
17

Do you have a trick without editing `body` properties ? – EntrustName Jan 04 '16 at 14:35
Yes, check my edited comment. – Shaher Jamal Eddin Jan 04 '16 at 15:27

Why does margin child element affect body element?

1 Answers1