Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wirkt sich die Zeilenhöhe auf die Höhe von HTML-Inhaltsboxen aus?

DDD
Freigeben: 2024-11-10 08:46:02
Original
387 Leute haben es durchsucht

How Does Line-Height Affect the Height of HTML Content-Boxes?

Die Höhe von Inhaltsfeldern in HTML-Elementen verstehen

In HTML können Elemente als Blockelemente oder Inline-Elemente kategorisiert werden. Die Höhe ihrer Inhaltsfelder oder der Bereich, den sie auf dem Bildschirm einnehmen, wird durch verschiedene Regeln bestimmt.

Blockelemente

Blockelemente wie div und p, ihre Höhe wird hauptsächlich durch ihre Zeilenhöheneigenschaft bestimmt. Wenn die Zeilenhöhe auf einen Wert wie 2em eingestellt ist, ist die Höhe des Inhaltsfelds doppelt so hoch wie die Zeilenhöhe.

Dieses Verhalten ist bei allen Blockelementen konsistent, wie im dargestellt folgendes Beispiel:

<div>
Nach dem Login kopieren

Inline-Elemente

Im Gegensatz zu Blockelementen ist dies bei Inline-Elementen wie span der Fall keine Höheneigenschaft haben. Stattdessen werden ihre vertikalen Abmessungen von ihren Schriftarteigenschaften abgeleitet. Die Spezifikation definiert nicht explizit, wie UAs die Höhe von Inline-Element-Inhaltsfeldern bestimmen sollen, aber sie verwenden normalerweise die Em-Box- oder Ober-/Unterlängenmaße der Schriftart.

Das bedeutet, dass Sie zwar die Zeilen- Die Höhe von Inline-Elementen wirkt sich nicht direkt auf deren Höhe aus. Die Höhe variiert je nach verwendeter Schriftart und Schriftgröße, wie unten gezeigt:

<span>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Zeilenhöhe auf die Höhe von HTML-Inhaltsboxen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage