html - 为什么在后代元素上设置填充会减小内容框的宽度？

Question

从昨天开始我就很困惑。实际上我有如下标记:

<div class="container">
    <div class="child>
        <div class="descendant">Content</div>
    </div>
</div>

和 CSS:

.container {
    max-width: 500px;
    min-width: 100px;
}

根据我的内容，.container 元素的宽度在 100px 到 500px 之间，子元素和后代元素有一些其他内容没有任何特定的 width 或 min/max-width。

发生的事情是，当我将水平填充应用到 .container 时，它的 content-box 大小保持不变，只是添加了 padding给它。但是每当我对任何子元素或后代元素应用水平填充时，它们都不会向它们的大小或父元素的大小添加填充。相反，它们的 content-box 大小减小并且它们容纳 padding。

我真的不明白这里发生了什么。谁能向我解释到底发生了什么？

Answer 1

宽度描述内容宽度，您明确设置为最大值 500px。只要有空间，容器的内容宽度将为 500px。如果您向容器添加内边距，则不会影响内容宽度，因为没有其他内容会限制它。

另一方面，后代的宽度受容器限制。如果您向后代添加填充，则宽度会减小，因此整个盒子仍然可以放入容器中。