I've followed this post - ( Why is adding or removing a border changing the way margins work? ) but I can't see anywhere in the specifications about border or padding being mentioned.
Let's say I have a two divs in question, the top div is my header and the div bellow is my nav which contains a paragraph "meee". The paragraph's(inside nav) margin will be greater than the top divs margin so the parent element(div) will get pushed down. This isn't the result I desire, I would like to move the paragraph element down inside of its parent div. One way to accomplish this is if I add a border to the div, this allows me to move the bottom paragraph down inside the div.
But as my question suggests, why does adding a border or padding stop margin collapsing?
<div class="container">
<div class="header">
<h1>Adam's page 4</h1>
</div>
<div class="nav">
<p> Meeee </p>
</div>
<div class="side">
<p> Hello</p>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.header{
height: 12%;
width: 100%;
background-color: lightcoral;
border: 1px solid red;
/* margin-bottom: 100px; */
}
.nav{
/* margin-top: 120px; */
height: 10%;
width: 100%;
background-color: lime;
/*border: 1px solid red; */
}
.nav p{
background-color: peru;
}
(Question is, why does adding a border or some padding prevent border collapsing not how to prevent border collapsing. Other question just asks and solves the problem)
