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

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

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

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

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

Ответы

Ответ 1

Область содержимого оставлена ​​после вычитания ширины границы.

Ширина и высота содержимого вычисляются путем вычитания границы и ширины заполнения соответствующих сторон от указанной ширины и 'свойства высоты.

Указанная ширина = 10 px
ширина границы = 10 пикселей
Ширина содержимого = заданная ширина (10 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 10 - 10 = 0

Указанная ширина = 0 px
ширина границы = 10 пикселей
Ширина содержимого = заданная ширина (0 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 0 - 10 = -10 (что позволит удалить 10 пикселей, используемых границей)

Но

Поскольку ширина и высота содержимого не могут быть отрицательными ([CSS21], раздел 10.2), это вычисление выполняется на уровне 0.

Указанная ширина = 0 px
ширина границы = 10 пикселей
Ширина содержимого = заданная ширина (0 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 0 - 10 = 0 (что не удаляет 10 пикселей, используемых границей)

Если вы не хотите использовать display:none; или visibility:hidden;, вам нужно установить равные нулю значения width:XX; и border-right:XX;.

Ответ 2

Взгляните на этот снимок экрана:

box metrics

Весь ящик 100x100px, как и следовало ожидать, но фактическая ширина - это 90px + 10px правая граница. Поэтому, когда вы устанавливаете ширину в 0, ширина по-прежнему равна 0 (не может иметь отрицательную ширину), но у вас все еще есть граница 10px.