Чому висота: 0 не приховує мій заповнений <div>, навіть із розміром коробки: border-box?

Question 1

У мене є <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) встановлено.

Question 2

Точне визначення border-box:

Тобто, будь-яке заповнення або облямівка, вказані на елементі, викладаються та промальовуються всередині вказаної ширини та висоти. Ширина та висота вмісту обчислюються шляхом віднімання меж та ширини заповнення відповідних сторін із заданих властивостей «ширина» та «висота».

Таким чином, ви змінюєте властивості висоти та ширини, але paddingі borderніколи не змінюєте.

Оскільки ширина та висота вмісту не можуть бути від’ємними ([CSS21], розділ 10.2), це обчислення розміщено на рівні 0.

Тоді, якщо height0, ви не можете зробити, щоб відступ був всередині, оскільки це означає, що висота буде від’ємною.

Question 3

Заява height: 0;застосовується. Якщо залишити це значення height: auto;, ви побачите різницю в 20 пікселів (висоту рядка з написом "Привіт!"), Що зробить загальною висотою 100 пікселів. Якщо висота встановлена на нуль, вона має лише 80 пікселів:padding-top + padding-bottom = 80px

Тож відповідь така: так, це очікувана поведінка.

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

Оновлення: Як зазначав Харді, використання додаткової оболонки div обходить цю проблему.

Демо

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;
}