Heim > Artikel > Web-Frontend > 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:
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:
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!