我有以下HTML

<div class="container">
        <div class="article">
            <h2>Article</h2>
        </div>
        <div class="blog">
            <h2>Blog</h2>
        </div>
    </div>

和此CSS

<div class="container">
        <div class="article">
            <h2>Article</h2>
        </div>
        <div class="blog">
            <h2>Blog</h2>
        </div>
    </div>

现在它们被完美地推入了因为2×600px=1200px（父级的宽度）。

但是如果我在

<div class="container">
        <div class="article">
            <h2>Article</h2>
        </div>
        <div class="blog">
            <h2>Blog</h2>
        </div>
    </div>

则布局中断。

在mozilla文档中提到

https://developer.mozilla.org/en-us/docs/learn/css/building_blocks/the_standard_css_box_model#the_standard_css_box_model

标准箱模型不包括它本身的边距。 所以只有填充和边框。但是我不给填充和边框rto我只给边距，我希望布局不会被破坏，并且仍然有600px的实际宽度。

somoene能解释一下这里发生了什么以及为什么我的布局被破坏了吗

顺晟科技：

值得注意的是，它将应用于元素边界之外，并将应用于元素内部。 为了更好地理解这一点，请考虑以下示例。

边距

正如您所看到的，子元素与其父元素的初始位置分开，并在其周围创建了一个空格。

填充

这里填充应用在子元素内部，这样它就不会离开父元素的宽度