我有一张带衬垫的<div>.我已将其设置为height: 0,并将其设置为overflow: hiddenbox-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中).height声明似乎并不适用于填充,尽管有box-sizing声明.

这是预期的行为吗?如果是,为什么?The MDN page on box-sizing似乎没有提到这个问题.

据我所知,the spec也没有-在我看来,当设置了box-sizing: border-box(或者实际上是padding-box)时,宽度和高度都应该包括填充.

推荐答案

border-box的确切定义是:

也就是说,元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制.内容宽度和高度的计算方法是从指定的"width"和"Height"属性中减go 相应边的边框宽度和填充宽度.

因此可以修改高度和宽度属性,但paddingborder永远不会更改.

由于内容宽度和高度不能为负值([CSS21],第10.2节),因此该计算的下限为0.

然后,如果height是0,你不能让填充物在里面,因为这意味着高度是负的.

Css相关问答推荐

当面板以Angular 上升时如何定位下拉面板

使用高图的背景大小渐变

具有共享的自动调整列宽的多个 CSS 网格

更改行数时更改 CSS 网格列

如何在悬停另一个部分的元素时使元素可见?

当父元素处于子元素 input 的焦点状态时更改父元素的样式

问题定位位置:Tailwindcss 中的绝对元素

如何给三角形添加渐变?

CSS 使文本扩展并保持居中与圆形扩展 div 的问题

左右卡片的 OwlCarousel 导航:react js

在 中制作等宽的列

在整个 DIV 周围添加 CSS 框阴影

如何始终在浏览器中显示垂直滚动条?

如何在 CSS 中覆盖图像?

内联块列表项中不需要的边距

你如何在 SASS 中定义属性 Select 器?

我的 inline-block 元素没有正确排列

仅针对使用的类优化 Font Awesome

可见性:隐藏 vs 显示:无 vs 不透明度:0

CSS属性中的auto值是什么意思.