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?
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.