CSS border width changing layout [duplicate] - html

Question

This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I have an issue when I change border width from 1px to 0px.
That changes the layout of divs. The divs should be stacked step by step in the influence of margin, but when I set the border width as 0px, the top margin becomes 0px.
This is my code.
div {
height: 300px;
width: 50%;
margin: 10px;
border: 1px solid red;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>

Answer 1

In the standard html content box model the width is only that of the content of the box. If you add padding and/or borders to it, these will be added to the box width (in your case, 50% + 1px + 1px).
You can change this behavior by choosing to use a different box model, the border box model : in this case the width you specify will always include padding and border.
You can do that like this:
<style>
div {
box-sizing: border-box;
height: 300px;
width: 50%;
margin: 10px;
border: 1px solid red;
}
.red { background-color: #ffcccc; }
.green { background-color: #ccffcc; }
.blue { background-color: #ccccff; }
.purple { background-color: #cccccc}
</style>
See here and here for more details.

Answer 2

You can try this
div {
height: 300px;
width: 50%;
padding: 1px;
margin:10px;
border:0px solid red;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc;
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>

Answer 3

You can use this code
body {
margin: 0;
padding: 0;
}
div {
height: 300px;
width: 50%;
margin: 10px;
border: 0px solid red;
float: left;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc;
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>

Answer 4

This should do it!
<style>
div {
height: 300px;
width: 50%;
margin: 10px;
box-shadow:inset 0px 0px 0px 1px red;
}
.red { background-color: #ffcccc; }
.green { background-color: #ccffcc; }
.blue { background-color: #ccccff; }
.purple { background-color: #cccccc}
</style>
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>