为什么不高度：0隐藏我的填充< div&gt，即使box-sizing：border-box？ [英] Why doesn’t height:0 hide my padded <div>, even with box-sizing:border-box?

问题描述

我有一个带有填充的< div> 我已将它设置为 height：0 ，并赋予 overflow：hidden 和 -sizing：border-box 。

HTML

 < div> Hello！< / div> 
  

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; 
} 
  

http://jsfiddle.net/FA29u/2/

据我所知，这应该使<

但是，它仍然可见（在Mac上的Chrome 31和Firefox 25中）。尽管 box-sizing 声明， height 声明似乎不适用于填充。 >

这是预期的行为吗？如果是，为什么？ 盒尺寸上的MDN页面似乎没有提及这个问题。

根据我所知，规范 - 它读取到我的宽度和高度应包括填充，当 box-sizing：border-box <

解决方案

code>（或者 padding-box

border-box 的确切定义是：

在元素上指定的任何填充或边框都会布局并在此指定的宽度和高度内绘制。内容宽度和高度通过从指定的width和height属性中减去各边的边框和填充宽度来计算。

所以你修改height的宽度属性，但 padding 和 border 从不改变。

由于内容宽度和高度不能为负（[CSS21]如果 height ，则计算结果为0。



<是0你不能使填充内部，因为这意味着高度将为负。

I’ve got a <div> with padding. I‘ve set it to height: 0, and given it overflow: hidden and box-sizing: border-box.

HTML

<div>Hello!</div>

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;
}

http://jsfiddle.net/FA29u/2/

As I understand, this should make the <div> disappear.

However, it’s still visible (in Chrome 31 and Firefox 25 on my Mac). The height declaration doesn’t appear to be applying to the padding, despite the box-sizing declaration.

Is this expected behaviour? If so, why? The MDN page on box-sizing doesn’t seem to mention this issue.

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.

解决方案

The exact definition of border-box is:

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 padding and border never change.

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Then if height is 0 you can't make the padding be inside because that implies the height will be negative.

这篇关于为什么不高度：0隐藏我的填充< div&gt，即使box-sizing：border-box？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！