Question

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

为了让它们分散一点，我添加了大约5px的右边和底部填充。但是我发现了一种奇怪的行为。填充会导致盒子水平移动，但是当垂直堆叠时，它们之间没有空隙，即使每个盒子上都有底部填充物。

进一步调查显示，复选框的box-sizing属性设置为border-box。阅读后，我发现border-box框模型计算宽度和高度以包括填充和边框。

复选框的高度为1.5rem。

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

为什么会这样？当然，填充应该对元素的大小没有影响（除非设置为荒谬，大于元素本身），无论我是否定义了一定的宽度或者是否要计算它？

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

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

Answer 1

根据我的理解，填充在使用border-box时不应该改变元素的大小。

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

<强>边界框

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

将box-sizing设置为border-box的实际效果是指定的宽度将包含边框和填充。该规范没有说明未指定的宽度，因此被视为正常宽度 - 尽可能广泛地包含内容和填充以及边框。

编辑：

由于以下原因，您实际上意味着发生的事情实际上是不可能的。想象一下，您在div中有内容，只有内容的auto宽度将完全是500px。然后在它周围抛出一个20px的填充物。

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

还没问题 - 默认情况下，div的大小调整为content-box，宽度为540像素。{/ p>

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

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

您应该建议的是现在应该忽略填充。因此，我们有一个div，其内容价值为500px，我们现在要在500px内包含填充，而不是扩展div的宽度。但是等等 - 现在内容框缩小到460px以允许填充，并且盒子的整体大小是500px。但是等等，我们在计算宽度时不应该考虑填充，所以我们最好将div渲染为460px吗？

你看到了问题吗？你可以继续这样无限。

为什么即使将box-sizing设置为border-box，填充也会添加到元素的可见宽度？

1 个答案: