Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
706 views
in Technique[技术] by (71.8m points)

css - Why doesn’t height:0 hide my padded <div>, even with box-sizing:border-box?

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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 can modify the height and 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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...