cssborder-box

Why does box-sizing: border-box still show the border with a width of 0px?

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.

Solution

  • 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.