Почему box-sizing: border-box по-прежнему показывает границу шириной 0px?

При использовании box-sizing: border-box в CSS, я предполагаю, что общая ширина элемента будет определена в его & quot; ширине & quot; значение. Так что, если я скажу, что ширина деления составляет 20px, а правая граница - 10px, я получу прямоугольник, занимающий пространство в 20px, а половина - это правая граница. Переместив его в точку, где я установил ширину 10 пикселей и правую границу, как здесь:

#box{
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 100px;
    background: black;
    border-right: 10px solid red;
}​

коробка будет состоять только из красной рамки. Что должно произойти, когда я установлю ширину в 0px? Я думал, что это заставит все это исчезнуть, но нет, результат точно такой же, как и выше:jsFiddle

Мой вопрос, если это ожидаемое поведение. Кажется, противоречит мне. Я хотел бы сделать так, чтобы коробка исчезала только манипулируя шириной / высотой. Спасибо за любой вклад.

Ответы на вопрос(2)

Ваш ответ на вопрос