我 http://jsfiddle.net/FA29u/2/ 据我所知,这应该会 但是,它仍然可见(在我的Mac上的Chrome 31和Firefox 25中).该 这是预期的行为吗?如果是这样,为什么?MDN页面 据我所知,规范也没有- 它向我读取宽度和高度都应该包括填充时 确切的定义 也就是说,元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制.通过从指定的"宽度"和"高度"属性中减去相应边的边框和填充宽度来计算内容宽度和高度. 所以你修改高度的宽度属性,但 由于内容宽度和高度不能为负([CSS21],第10.2节),因此该计算为0. 然后,如果 声明 所以答案是:是的,这是预期的行为. 您可以设置宽度和高度之间的任意值 更新:正如哈代提到的,使用额外的包装器div解决了这个问题. 演示 HTML: CSS:height: 0
,并赋予它overflow: hidden
和box-sizing: border-box
.
HTML
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;
}
height
声明没有出现,将适用于填充,尽管box-sizing
声明.box-sizing
似乎没有提到这个问题.box-sizing: border-box
(或确实padding-box
)设置.
border-box
是:
padding
并border
不会改变.
height
为0,则无法将填充放在内部,因为这意味着高度将为负.height: 0;
适用.如果你离开它height: auto;
,你会看到20px的差异(线条的高度与"你好!"),使它总高100px.高度设置为零,它只有80px高:padding-top + padding-bottom = 80px
0
及80px
(如果你有填充40像素),仍然得到相同的尺寸.<div class="div-1">
<div class="div-2">
Hello!
</div>
</div>
.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;
}