Почему не высота: 0 скрыть мой padded <div>, даже с размером окна: border-box?

Я получил <div> с отступом. Я установил его в height: 0 и дал ему overflow: hidden и box-sizing: border-box.

HTML

<div>Hello!</div>

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;

    padding: 40px;

    background: red;
    color: white;
}

http://jsfiddle.net/FA29u/2/

Как я понимаю, это должно привести к исчезновению <div>.

Однако его все еще видно (в Chrome 31 и Firefox 25 на моем Mac). Объявление height, похоже, не применяется к заполнению, несмотря на объявление box-sizing.

Является ли это ожидаемым поведением? Если да, то почему? Страница MDN на box-sizing, похоже, не упоминает эту проблему.

Не, насколько я могу судить, спецификация - он мне читается, как ширина и высота должны включать отступ, когда box-sizing: border-box (или действительно padding-box).

Ответы

Ответ 1

Точное определение border-box:

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

Таким образом, вы изменяете высоту свойств ширины, но padding и border никогда не меняются.

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

Тогда, если height равно 0, вы не можете сделать добавление внутри, потому что это означает, что высота будет отрицательной.

Ответ 2

Применяется декларация height: 0;. Если вы оставите его на height: auto;, вы увидите разницу в 20px (высота линии с "Hello!" ), Делая ее общей высотой 100 пикселей. Если высота установлена ​​равной нулю, она достигает всего 80 пикселей: padding-top + padding-bottom = 80px

Итак, ответ: Да, ожидаемое поведение.

Вы можете установить ширину и высоту для любого значения между 0 и 80px (если у вас есть 40px отступов) и по-прежнему получать одинаковые размеры.

Обновление: как упоминал Харди, использование этой дополнительной обертки вокруг этой проблемы.

Демо

HTML:

<div class="div-1">
    <div class="div-2">
        Hello!
    </div>
</div>

CSS

.div-1 {
    padding: 40px;

    /* This is not visible! */
    border: 1px solid dashed;
}
.div-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0px;
    width: 0px;
    background: red;
    color: white;
    overflow: hidden;
}