为什么没有身高：0隐藏我填充的<div>，即使有框

我有一个带有填充的<div> 。 我将它设置为height: 0 ，并给它overflow: hidden和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/

据我所知，这应该使<div>消失。

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

这是预期的行为？ 如果是这样，为什么？ box-sizing的MDN页面似乎没有提到这个问题。

也就是说，就我所知，规范 - 在我看来，宽度和高度都应该包括填充时box-sizing: border-box （或确实是padding-box ）被设置。

---

border-box的确切定义是：

也就是说，在元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制。 内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。

所以你修改宽度属性的高度，但padding和border永远不会改变。

由于内容宽度和高度不能为负数（[CSS21]，第10.2节），因此此计算的地址为0。

然后，如果height为0，则不能使填充位于里面，因为这意味着高度将为负数。

---

height: 0;的声明height: 0; 被申请;被应用。 如果你把它放在height: auto; ，你会看到一个20px的差异（与“你好！”的线的高度），使它总共100px高。 将高度设置为零，仅80px高： padding-top + padding-bottom = 80px

所以答案是： 是的，这是预期的行为。

您可以将宽度和高度设置为0到80px之间的任何值（如果您有80px的填充）并且仍然具有相同的尺寸。

更新：正如哈代提到的，使用额外的包装div可以解决这个问题。

演示

HTML：

<div class="div-1">
    <div class="div-2">
        Hello!
    </div>
</div>

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

链接地址: http://www.djcxy.com/p/75599.html

上一篇: Why doesn’t height:0 hide my padded <div>, even with box

下一篇: css