Warum verbirgt height: 0 mein gepolstertes <div> nicht, auch bei Boxgröße: border-box?

Ich habe eine <div>mit Polsterung. Ich habe es eingestellt height: 0und gegeben overflow: hiddenund 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/

Soweit ich weiß, sollte dies das <div>Verschwinden bringen.

Es ist jedoch weiterhin sichtbar (in Chrome 31 und Firefox 25 auf meinem Mac). Die heightDeklaration scheint trotz der box-sizingDeklaration nicht für die Polsterung zu gelten .

Ist das erwartetes Verhalten? Wenn ja warum? Die MDN-Seite aufbox-sizing scheint dieses Problem nicht zu erwähnen.

Soweit ich das beurteilen kann, ist die Spezifikation auch nicht so - sie lautet für mich, dass sowohl Breite als auch Höhe eine Polsterung enthalten sollten, wenn box-sizing: border-box(oder tatsächlich padding-box) eingestellt werden.

Die genaue Definition von border-boxlautet:

Das heißt, alle auf dem Element angegebenen Polsterungen oder Ränder werden innerhalb dieser angegebenen Breite und Höhe angeordnet und gezeichnet. Die Inhaltsbreite und -höhe werden berechnet, indem die Rand- und Füllbreiten der jeweiligen Seiten von den angegebenen Eigenschaften "Breite" und "Höhe" subtrahiert werden.

So können Sie die Höhe eine Breite Eigenschaften ändern aber paddingund sich bordernie ändern.

Da die Breite und Höhe des Inhalts nicht negativ sein dürfen ([CSS21], Abschnitt 10.2), wird diese Berechnung auf 0 gesetzt.

Wenn heightdann 0 ist, können Sie die Polsterung nicht im Inneren platzieren, da dies bedeutet, dass die Höhe negativ ist.

Die Erklärung von height: 0;wird angewendet. Wenn Sie es bei height: auto;belassen, sehen Sie einen Unterschied von 20 Pixel (die Höhe der Linie mit "Hallo!"), Was eine Gesamthöhe von 100 Pixel ergibt. Wenn die Höhe auf Null gesetzt ist, ist sie nur 80 Pixel hoch:padding-top + padding-bottom = 80px

Die Antwort lautet also: Ja, es ist das erwartete Verhalten.

Sie können Breite und Höhe auf einen beliebigen Wert zwischen 0und 80pxeinstellen (wenn Sie 40 Pixel Polsterung haben) und trotzdem die gleichen Abmessungen erhalten.

Update: Wie Hardy bereits erwähnt hat, kann dieses Problem durch die Verwendung eines zusätzlichen Wrapper-Div umgangen werden.

Demo

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