为什么即使 box-sizing 设置为 border-box，内边距也会增加元素的可见宽度？

Question

所以我使用 Semantic-ui 进行编码，并且我在 flexbox 容器中有两个彼此相邻的切换框（复选框）。当窗口大小减小时，它们会环绕以使一个在另一个之上。

为了让它们散开一点，我添加了大约 5 像素的右侧和底部填充。但是我注意到一个奇怪的行为。填充会导致盒子水平分开，但是当垂直堆叠时，它们之间没有空间，即使每个盒子都有底部填充。

进一步调查显示，复选框的box-sizing 属性设置为border-box。看完后发现border-box盒子模型计算的宽高包括padding和border。

复选框的高度为 1.5rem。

我的问题如下。据我了解，使用边框框时，填充不应该改变元素的大小。然而，只有在链接的 jsfiddle 中设置了明确的尺寸时，这似乎才是正确的。高度已设置，因此底部填充不会作为额外添加。但宽度不是，右填充对 div 的可见宽度有影响。

为什么会这样？当然，填充应该对元素的大小没有影响（除非设置为比元素本身大的荒谬的东西），无论我是否定义了明确的宽度或将其留给计算？

JSFiddle：http://jsfiddle.net/Astridax/8cd48emn/

请尝试使用开发工具切换填充以了解我的意思。

Answer 1

据我了解，使用边框框时，填充不应改变元素的大小。

这就是你感到困惑的地方。以下是规范对此主题的说明：http://www.w3.org/TR/css3-ui/#box-sizing0

边框

指定的宽度和高度（以及相应的最小值/最大值 properties) 在这个元素上确定元素的边框。 也就是说，元素上指定的任何填充或边框都会被布局 并在这个指定的宽度和高度内绘制。内容宽度 和高度是通过减去边框和填充宽度来计算的 指定“宽度”和“高度”的相应边 特性。由于内容的宽度和高度不能为负 （[CSS21]，第 10.2 节），此计算的下限为 0。

将box-sizing设置为border-box的实际效果是指定宽度会说包括边框和内边距。规范没有说明 未指定的 宽度，因此它们被视为正常宽度 - 与包含内容、填充和边框所需的宽度一样宽。

编辑：

你暗示应该发生的事情实际上是不可能做到的，原因如下。假设您在div 中有内容，这样auto 的宽度仅内容就是500px。然后在其周围放置一个 20 像素的填充。

#myDiv {
    padding: 20px;
    width: auto;
}

没问题 - 你有一个 540 像素宽的 div，默认情况下盒子大小为 content-box。

好的，让我们将box-sizing 更改为border-box。

#myDiv {
    box-sizing: border-box;
    padding: 20px;
    width: auto;
}

您的建议应该是现在应该忽略填充。所以我们有一个具有 500px 内容的 div，我们现在将在 500px 内包含填充，而不是扩展 div 的宽度。但是等等 - 现在内容框已经缩小到 460 像素以允许填充，并且框的整体大小为 500 像素。但是等等，我们不应该在计算宽度时考虑填充，所以我们最好将 div 渲染为 460px 对吧？

你看到问题了吗？你可以这样无限下去。