Warum haben leere Inline-Block-Divs eine Höhe?

Warum Inline-Block eine Höhe für leere Divs festlegt

Wenn einem leeren Div-Element die Anzeigeeigenschaft „inline-block“ zugewiesen wird, Es zeigt unerwartet einen Höhengewinn, ein Phänomen, das bei „display:block“ nicht auftritt. Dieses scheinbar paradoxe Verhalten ist auf die inhärenten Eigenschaften der Inline-Block-Formatierung zurückzuführen.

Zeilenhöhenberechnung im Inline-Block

Beim Festlegen eines Elements auf Inline-Block, Zeilenhöhenberechnungen unterliegen einer Transformation. Anstatt die Textbasis innerhalb auszurichten, richtet der Inline-Block die Unterseite, die Oberseite oder beides aus.

Zeilenhöhe für leeren Inline-Block

Für leere Inline-Block-Elemente , wird die Zeilenhöhenberechnung aus den mit dem Element verknüpften Schriftartmetriken abgeleitet. Da jedoch kein Textinhalt vorhanden ist, führt dies dazu, dass das Element eine grundlegende Zeilenhöhe annimmt, die auf der Schriftgröße basiert, die es von seinem übergeordneten Element (normalerweise dem Körper) übernimmt.

Behebung des leeren Inline-Elements Blockhöhe

Um die unerwünschte Höhe zu beseitigen, die durch die geerbte Zeilenhöhe verursacht wird, kann man ein Wrapper-Element verwenden, das die Schriftgröße explizit auf 0 setzt und so jede Berechnung der Zeilenhöhe effektiv zunichte macht:

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

Update: Höhe eines leeren Inline-Blocks

Es ist wichtig zu beachten, dass es für die Höhe eines leeren Inline-Block-Elements keine offizielle Dokumentation gibt. Allerdings zeigen Beobachtungen ein Muster.

Mindestzeilenplatzreservierung

Inline-Block-Elemente scheinen unabhängig vom Inhalt einen Mindestzeilenplatz zu reservieren. Dieser Abstand basiert auf der vom übergeordneten Element geerbten Zeilenhöhe.

Auswirkungen

Dieses Verhalten deutet darauf hin, dass inline-block von Natur aus Inhalte erwartet und einen Standardzeilenbereich reserviert dafür, auch wenn es leer ist. Dies steht zwar im Widerspruch zu den W3-Spezifikationen für Leerzeilenfelder mit der Höhe Null, ist aber eine spezifische Eigenart der Inline-Blockformatierung.

Das obige ist der detaillierte Inhalt vonWarum haben leere Inline-Block-Divs eine Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!