Margin not implemented from parent element

Question

I was playing with css:

<body >
<div style="background-color:lightblue;">
<div style= "margin-bottom : 40px;">This is some text in a div element</div>
</div>
<div style="background-color:red;"> hdjj</div>
</body>

This code make the div tag to be away from second div and not from child div Why is it so?

@Rob can you please check the question I have made some edits. — Laveena, Mar 27 '20 at 13:02
@Rob Nope. I already know the concept of margin collapse. Here my doubt is why in second case margin of child div is calculated from html tag, why not body tag? — Laveena, Mar 27 '20 at 13:08

Ritanshu Singh · Accepted Answer · 2020-03-27T13:11:55.797

It's due to margin collapsing. Margin collapsing simply means that if any element comes after another or inside another being first or the last element inside then the margin (top or bottom) touching with other element or parent will just collapse inside the other one's or parent's margin and simply the bigger margin will win. In this case, the child has a bottom margin collapsed with margin of parent and it all results in a case that the child doesn't have a margin but parent, but as soon as you apply border, the margin of child gets prohibited from collapsing with parent since the border comes in-between.

Margin not implemented from parent element

1 Answers1