Warum gewinnt ein leeres Inline-Block-Div innerhalb eines versteckten Containers an Höhe?

Bei Verwendung von Inline-Block gewinnt ein leeres Inline-Div-Element in einem versteckten Container seltsamerweise an Höhe. Warum tritt dies im Gegensatz zum Verhalten von display:block auf?

Display:inline-block verleiht dem Element eine spezifische Formatierung:

• Inline-Level-Formatierung: Elemente werden gelegt horizontal innerhalb des Containerblocks aus.
• Zeilenhöhenberechnungen: Die Zeilenhöhe wird für Inline-Elemente unterschiedlich berechnet. Bei Inline-Block-Elementen entspricht dies der Höhe des Randfelds. Bei normalen Inline-Elementen ist es die Eigenschaft „line-height“.

Wenn das Inline-Block-Element leer ist, nimmt es seine grundlegende Zeilenhöhe an, auch wenn keine Schriftart oder Textinhalt vorhanden ist. Dies führt dazu, dass das Element trotz seines leeren Zustands eine kleine, aber spürbare Höhe gewinnt.

Eine Problemumgehung zur Vermeidung dieses Höhenproblems besteht darin, einen Wrapper mit Schriftgröße:0 zu verwenden, um die Zeilenhöhenberechnung zu eliminieren:

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

Update: Grundlegendes zur Inline-Block-Höhe

Entgegen anfänglichen Annahmen ist die genaue Höhe eines leeren Inline-Block-Elements nicht offiziell dokumentiert. Beobachtungen und Tests deuten jedoch darauf hin, dass:

• Inline-Block einen minimalen Zeilenraum reserviert, der auf der geerbten Zeilenhöhe basiert, die normalerweise durch den Element.
• Dieser Zeilenraum bleibt bestehen, auch wenn der Inline-Block leer ist und sollte gemäß CSS-Spezifikationen theoretisch als Nullhöhe behandelt werden.

Das obige ist der detaillierte Inhalt vonWarum gewinnt ein leeres Inline-Block-Div innerhalb eines versteckten Containers an Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!