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

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。如果向容器添加填充，则不会影响内容宽度，因为没有其他内容会限制它。

另一方面，后代的宽度受容器限制。如果向子体添加填充，则宽度会减小，以便整个框仍可放入容器内。

Answer 2

这只是正常的盒模型行为。向不受限制其大小的父元素约束的元素添加填充将向外增长以适应新的填充。但是，如果元素包含在具有固定宽度的父元素中，并且您向内部元素添加填充，则它无法向外增长并强制边界父元素增长 - 它只能减少其content-box为填充腾出空间。

如果您希望外部和内部div 的行为一致，则可以向.container添加box-sizing: border-box;，填充不会导致元素增长超过指定的宽度/高度。