Why margin is included in my standard box model? - html

Question

I have the following HTML
<div class="container">
<div class="article">
<h2>Article</h2>
</div>
<div class="blog">
<h2>Blog</h2>
</div>
</div>
and this css
.container {
width: 1200px;
}
.article {
background-color: red;
float: left;
width: 600px;
}
.blog {
background-color: blue;
width: 600px;
float: left;
}
now they are perfecly putted inside the parent because 2 x 600px = 1200px ( the parent's width ).
But if i put margin in blog
.blog {
background-color: blue;
width: 600px;
float: left;
margin: 20px;
}
then the layout is broken.
On the mozilla documentation is mentioned that
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model
standard box model does not include the margin it self.
So only padding and border. But i give not padding and border rto my blog div i give only margin and i expect the layout to not be broken and to have still actuil width of 600px.
Can somoene explain me what is happening here and why my layout is broken

Answer 1

It is worth noting that margin will apply outside the borders of the element and padding will apply inside the element.
To understand this better consider the following examples.
Margin
* {box-sizing: border-box;}
.parent {width: 200px; height: 220px; background: limegreen;}
.child {height: 200px; width: 100%; background: red; margin: 20px;}
<div class="parent">
<div class="child">
</div>
</div>
As you can see that the child element is parted way from its parent's initial position and creating a space around it.
Padding
*{box-sizing: border-box;}
.parent1 {width: 200px; height: 220px; background: limegreen;}
.child1 {height: 200px; width: 100%; background: red; padding: 20px;}
<div class="parent1">
<div class="child1">
</div>
</div>
Here the padding is applied inside the child element so it won't leave the parent's width