When using box-sizing: border-box
in CSS, I assume that the total width of an element will be defined in its "width" value. So if I say that the width of a division is 20px and the right border is 10px, I will end up with a box that takes up the space of 20px and half of it is the right border. Pushing it to the point where I set the width to 10px and the right border, too, like here:
#box {
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 50px;
background: black;
border-right: 10px solid red;
}
<div id="box"></div>
The box will only consist of the red border. What should happen, when I set the width to 0px? I thought it would make the whole thing disappear, but no, the result is exactly the same like the one above:
#box-1 {
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 50px;
margin-bottom: 10px;
background: black;
border-right: 10px solid red;
}
#box-2 {
overflow: hidden;
width: 0px;
box-sizing: border-box;
height: 50px;
background: black;
border-right: 10px solid red;
}
<div id="box-1"></div>
<div id="box-2"></div>
View on jsFiddle
My question is if this is the expected behavior. Seems inconsistent to me. I would like to make a box disappear only manipulating the width/height.
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
In the content box model, the content inside of element will have the same dimension as the element. In the border box model, the content's dimension has to subtract the border and padding from the element's dimension.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
The content area is anything left after you subtract the width of the border.
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.
Specified width = 10 px
border width = 10 px
Content width = Specified width (10 px) - border width (10 px)
Content width 10 - 10 = 0
Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)
But
As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)
If you don't want to use display:none;
or visibility:hidden;
, you need to set both the width:XX;
and the border-right:XX;
to zero.
Take a look at this screenshot:
The entire box is 100x100px
as you would expect, but the actual width is 90px
+ 10px
right border. So when you set the width to 0, the width is still 0 (can't have negative width), but you still have the 10px border.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With