Height + padding + box-sizing?

I was playing around with some accordion transitions and came on an odd behavior of box-sizing.
Say for example, you were to set an element to 50px and 5px padding and then box-sizing: border-box, the final height is 50px. BUT if you set the height to 0px the final height is 10px ( where I would expect it to be 0px). So it appears that box-sizing only works UP TO the sum of the padding, which is somewhat disappointing. Of course maybe I am just missing something. I would love to hear other forum member’s experience with this property.

Yes I’ve run into this before (in a thread on here somewhere) and the simple answer is that the height of an element in that model is made up with its height+padding+borders so if any one of those is present that that will be the height of the element. Which basically means that with zero height and width both models will appear to be the same as the padding/borders will be visible on both.

Whoa I had forgotten about this thread.

the simple answer is that the height of an element in that model is made up with its height+padding+borders

It seem you are right , but I have to go on record an say this is counter intuitive. the very reason for box-sizing is to contain the calculated size to specific value, regardless of border and padding. :confused:

I wonder is there is anyway to get an element with padding to collapse to 0?

Yes but it must account for padding and borders and can’t forget about them just because you set a small height. When you think about it how else can it work?

It’s the same at any size (not just zero) and if you apply more padding than the width and the element the element becomes larger. According to the specs the padding and border are used to find the content width and height so the computation is different to what I said but has the same result. The content width is worked out like this:

W3C

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. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

I wonder is there is anyway to get an element with padding to collapse to 0?

[/quote]

I think you could only do that if you wrapped a parent around it and set that to zero and hid the overflow.

Interesting to read this. I just started using box-sizing more today. Went to the http://caniuse.com/#search=box-sizing to check for coverage and issues.
This wasn’t mentioned. neat to find this out here.
There was this for android.

Android browsers do not calculate correctly the dimensions (width and height) of the HTML select element.

D

Paul,

What I meant was that i would assumed that the algorythm used would be something like this, for box-sizing:border-box ;

display HEIGHT=DECLEARED HEIGHT;
or HEIGHT= ((HEIGHT- (BORDER + PADDING)) >=0) ? HEIGHT- (BORDER + PADDING)) : 0;

which would make this property infinitely handy.

but at the moment this seems to be :HEIGHT= ((HEIGHT- (BORDER + PADDING)) >= (BORDER + PADDING ? HEIGHT- (BORDER + PADDING)) : (BORDER + PADDING);

I think its one of those descisions that could have gone either way except that there already was a historic model in use with IE and I guess the new specs fell in line with the old IE box model.

It would have been useful to have padding and borders only accounted for when there was room for them to fit and I suppose they could have reset padding to zero if it was over constrained much in the same way that margins were handled.

Interesting to read this. I just started using box-sizing more today.

The border-box box sizing model is very useful and more and more developers are using it as their default and it works back to IE8. It makes it so easy to have 2 divs of 50% with 25px padding and 2px borders and fit all the way across nicely.:slight_smile: