4

Consider this code

div {
  box-sizing: border-box;
  
  width: 0;
  height: 0;    
  max-width: 0;
  max-height: 0;
  
  border: 1px solid gray;
  padding: 12px;
  overflow: hidden;
}
<div>Hi</div>

According to everything I've ever read, understood, and used about box-sizing: border-box; This should show nothing since the width and height are zero and padding/border are inside of the zero width and height.

What we see however is a 26x26 box ((12 padding + 1 border)*2). What gives? Why is border-box not working here?

George Mauer
  • 117,483
  • 131
  • 382
  • 612
  • 2
    What you want is physically impossible. The browser has to make a choice: either honour the padding, or the width. If it would show 0 pixels, people would start complaining that it didn't honour the padding. – Mr Lister Mar 06 '15 at 22:00
  • 1
    @MrLister That's the definition of `box-sizing: border-box`, isn't it? That width includes padding and border – George Mauer Mar 06 '15 at 22:00
  • 3
    @MrLister: I don't think this represents "an impossible goal" so much as it represents a (potential) bug/ambiguity in the spec versus expectation. – David Thomas Mar 06 '15 at 22:04
  • @MrLister Correct, however I would assume that the browsers internal rendering logic has some conditional that will render this a certain way based on whether or not is has content. Hope you get a detailed answer. – robabby Mar 06 '15 at 22:04
  • Yeah, seriously @DavidThomas that could certainly be considered a bug in the spec – George Mauer Mar 06 '15 at 22:08
  • it is not a bug to me , if padding is included into calculation, how do you include / remove it from 0. spec doesn't say it erases it – G-Cyrillus Mar 06 '15 at 23:24
  • @GCyrillus yeah, but it seems like the spec is specifying implementation details, which is simply not what specs should do. – George Mauer Mar 07 '15 at 23:07
  • if padding should not be applied, why border width should if box is set to 0 height/width and box-sizing to border-box ? – G-Cyrillus Mar 08 '15 at 01:29
  • Does this answer your question? [Why does box-sizing: border-box still show the border with a width of 0px?](https://stackoverflow.com/questions/11142330/why-does-box-sizing-border-box-still-show-the-border-with-a-width-of-0px) – showdev Mar 19 '21 at 00:06

1 Answers1

5

According to the spec,

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.

Therefore, your element effectively has a height and a width of 0. But you see it bigger because of the padding and the border.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 2
    That doesn't really explain what's going on here. Should the height and width be zero then? – George Mauer Mar 06 '15 at 22:01
  • 1
    @GeorgeMauer Again, what you are trying to do is physically impossible. – Mr Lister Mar 06 '15 at 22:02
  • @GeorgeMauer I think the important part here is where it says "**The content width**". So the content width is 0, but the padding and border are still applied on top of that. – James Montagne Mar 06 '15 at 22:04
  • Oooooh, I see what you're getting at. Well hell...how do you do a zero-sized container with a padding that expands to a width then? Do we *still* have to hack around things with intermediate elements? – George Mauer Mar 06 '15 at 22:05
  • 2
    @GeorgeMauer An outer wrapper that's 0 and an inner element with the padding? – James Montagne Mar 06 '15 at 22:05
  • @GeorgeMauer You use box-sizing:content-box. – Mr Lister Mar 06 '15 at 22:06
  • @MrLister nah, `content-box` has the same effect. – George Mauer Mar 06 '15 at 22:06
  • I still don't know what you want. A zero content plus a positive padding is still a positive amount of space. If you want a total width of zero, use zero padding! So please explain what you do want. – Mr Lister Mar 06 '15 at 22:08
  • @GeorgeMauer If you don't want the padding, remove it. Tricks with `width` and `box-sizing` won't work. – Oriol Mar 06 '15 at 22:08
  • @MrLister I'm pretty sure the intent is to have the text in the element padded, but if the element gets smaller than the padding for it to clip the padding and still resize down as far as 0. – James Montagne Mar 06 '15 at 22:09
  • @MrLister Yeah, the actual use case for me is a padded container that is not rendered due to having a zero width, but when the parent is hovered-over it slides out to its natural width. I can do it a dozen ways, but I was excited since this seems to not be hacky at all, except then...this. In other words, what I expect, is when I set `border-box` and specify `width: 0`, for the element not to render at all except for any margin – George Mauer Mar 06 '15 at 22:11
  • @GeorgeMauer If you don't want it rendered, why don't you just use `display:none`. – Mr Lister Mar 06 '15 at 22:12
  • @MrLister absolutely, and that's probably what I will do, but then I have to put `display: flex` on the selector that causes it to slide out which is mildly hacky. – George Mauer Mar 06 '15 at 22:13
  • Actually @MrLister that won't work. Check out [this](http://jsbin.com/foxefuwobo/2/edit?html,css,output) versus [this](http://jsbin.com/foxefuwobo/1/edit?html,css,output). Notice that the latter doesn't animate expansion (and also forces you to put `display: flex` on *all* expandables). Sounds like the best solution is to use a hacky intermediate element. – George Mauer Mar 06 '15 at 22:25