CSS 为什么 height:0 不隐藏我的填充 <div>，即使使用 box-sizing:border-box？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20827367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn’t height:0 hide my padded <div>, even with box-sizing:border-box?
提问by Paul D. Waite
I've got a <div>with padding. I‘ve set it to height: 0, and given it overflow: hiddenand box-sizing: border-box.
我有一个<div>带衬垫的。我已将其设置为height: 0, 并赋予它overflow: hidden和box-sizing: border-box。
HTML
HTML
<div>Hello!</div>
CSS
CSS
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
overflow: hidden;
padding: 40px;
background: red;
color: white;
}
As I understand, this should make the <div>disappear.
据我了解，这应该会使<div>消失。
However, it's still visible (in Chrome 31 and Firefox 25 on my Mac). The heightdeclaration doesn't appear to be applying to the padding, despite the box-sizingdeclaration.
但是，它仍然可见（在我的 Mac 上的 Chrome 31 和 Firefox 25 中）。该height声明没有出现，将适用于填充，尽管box-sizing声明。
Is this expected behaviour? If so, why? The MDN page on box-sizingdoesn't seem to mention this issue.
这是预期的行为吗？如果是这样，为什么？MDN 页面上box-sizing似乎没有提到这个问题。
Nor, as far as I can tell, does the spec— it reads to me like both width and height should include padding when box-sizing: border-box(or indeed padding-box) are set.
据我所知，规范也没有- 它对我来说就像宽度和高度都应该在box-sizing: border-box（或确实padding-box）设置时包括填充。
采纳答案by DaniP
The exact definition of border-boxis:
的确切定义border-box是：
That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width' and ‘height' properties.
也就是说，元素上指定的任何填充或边框都在此指定的宽度和高度内布置和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。
So you modify the height an width properties but paddingand bordernever change.
所以你修改高度的宽度属性，但padding并border不会改变。
As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
由于内容的宽度和高度不能为负（[CSS21]，第 10.2 节），因此该计算的下限为 0。
Then if heightis 0 you can't make the padding be inside because that implies the height will be negative.
然后如果height是 0 你不能让填充在里面，因为这意味着高度将为负。
回答by kleinfreund
The declaration of height: 0;is applied. If you leave it at height: auto;, you would see a 20px difference (the height of the line with "Hello!"), making it a total 100px high. With height set to zero, it's only 80px high: padding-top + padding-bottom = 80px
声明height: 0;适用。如果你把它留在height: auto;，你会看到一个 20 像素的差异（带有“你好！”的线的高度），使它的总高度为 100 像素。高度设置为零，它只有 80px 高：padding-top + padding-bottom = 80px
So the answer is: Yes, it's expected behavior.
所以答案是：是的，这是预期的行为。
You could set width and height to any value between 0and 80px(if you have 40px of padding) and still get the same dimensions.
您可以设置宽度和高度之间的任意值0及80px（如果你有填充40像素），仍然得到相同的尺寸。
Update: As Hardy mentioned, using an additional wrapper div gets around this issue.
更新：正如 Hardy 提到的，使用额外的包装 div 可以解决这个问题。
HTML:
HTML：
<div class="div-1">
<div class="div-2">
Hello!
</div>
</div>
CSS:
CSS：
.div-1 {
padding: 40px;
/* This is not visible! */
border: 1px solid dashed;
}
.div-2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0px;
width: 0px;
background: red;
color: white;
overflow: hidden;
}
