Warum erzeugt „display: inline-block“ eine Lücke über einem versteckten Div?

Warum Inline-Block versteckten Divs Höhe hinzufügt

Bei Verwendung von display: inline-block auf einem

Wenn Sie ein Element verwenden, kann es zu einer unerwarteten Lücke über dem Element kommen, wenn das enthaltende Element ausgeblendet ist. Dieses Verhalten tritt bei display: block nicht auf.

Warum passiert das?

display: inline-block ändert die Zeilenhöhenberechnungen. In einem Inline-Formatierungskontext basiert die Höhe von Inline-Block-Elementen auf ihrer „line-height“-Eigenschaft. Bei leeren Inline-Block-Elementen entspricht dies ihrer grundlegenden Zeilenhöhe, auch wenn sie keinen sichtbaren Inhalt haben.

Begründung hinter der Lücke

Daher eine leere inline-block reserviert einen minimalen Zeilenraum basierend auf seiner geerbten Zeilenhöhe, normalerweise aus dem Element. Dieser reservierte Platz erscheint als Lücke über dem Element, wenn sein Container nicht sichtbar ist.

Schnelle Lösung

Um diese Lücke zu schließen, besteht eine schnelle Lösung darin, die Inline einzuschließen -block-Element in einem Wrapper, der die Schriftgröße explizit auf 0 festlegt. Dadurch wird sichergestellt, dass keine Schriftart und Zeilenhöhe vorhanden ist, was zu keiner Höhe für den leeren Inline-Block führt.

Aktualisieren

Die Höhe eines leeren Inline-Block-Elements ist in der offiziellen Dokumentation nicht explizit definiert. Basierend auf Tests kann es jedoch wie folgt verstanden werden:

• Leerer Raum: Inline-Block-Elemente reservieren eine Zeilenbox für potenziellen Inhalt.
• Geerbte Zeilenhöhe: Dieses Zeilenfeld basiert auf der vom übergeordneten Element geerbten Zeilenhöhe, einschließlich des Element.
• Mindestzeilenabstand: Obwohl leere Inline-Blöcke technisch gesehen nicht für Formatierungszwecke vorhanden sind, reservieren sie dennoch einen Mindestzeilenabstand.

Das obige ist der detaillierte Inhalt vonWarum erzeugt „display: inline-block“ eine Lücke über einem versteckten Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

for using Property this display

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn