Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Mehrere Konzepte

• Zeilenbox: Eine Box, die eine Inline-Box umschließt. Eine oder mehrere Zeilenboxen werden gestapelt, um ein HTML-Element zu unterstützen.
• Inline(-Level)-Box: Dies kann eine Box sein, die von einem Inline-Element umschlossen wird, oder eine anonyme Box, die nur Text enthält.
• Inhaltsbereich: Der Umfang des Inhaltsbereichs wird bei nicht ersetzten Elementen durch die Schriftgröße und die Schriftart selbst bestimmt, bei ersetzten Elementen durch die Breite und Höhe des Elements selbst.
• Grundlinie: Die Position der Grundlinie eines Elements wird durch die Position der Unterseite des Buchstabens x innerhalb des Elements bestimmt. Natürlich ist die Position der Grundlinie bei verschiedenen Schriftarten unterschiedlich.

Sie können es anhand eines Code-Schnipsels verstehen:

div {
  Hintergrundfarbe: #ccc;
  Schriftgröße: 20px;
  Farbe: #fff;
}
Spanne {
  Farbe: rot;
}
<div>Text 1<span>Text 2</span>Text 3</div> 

Der weiße Text ist eine anonyme Inline-Box, und der rote Text ist eine Inline-Box, die von span umschlossen ist. Diese drei Inline-Boxen bilden zusammen eine Line-Box, welche als graue Fläche aufgefasst werden kann, da in diesem Beispiel div um eine Line-Box erweitert wird. Wenn der Text mehrere Zeilen umfasst, gibt es auch mehrzeilige Felder.

Zum Inhaltsbereich hat das W3C folgende Erklärung:

CSS 2.1 definiert nicht, was der Inhaltsbereich einer Inline-Box ist (siehe 10.6.1 oben) und daher können verschiedene UAs die Hintergründe und Ränder an unterschiedlichen Stellen zeichnen.

Dieser Artikel definiert den Inhaltsbereich eines nicht ersetzten Elements als seine eigene Breite und Höhe plus Rand, Polsterung und Rahmen. Ich denke, unter Inhaltsbereich ist die Inhaltsbox zu verstehen.

Zeilenfeldhöhe

Der Browser berechnet die Höhe jeder Inline-Box innerhalb der Zeilenbox. Die Berechnungsmethode ist für verschiedene Inline-Boxen unterschiedlich:

Wenn es sich um ein ersetztes Element (wie etwa img , input ), ein Inline-*-Element oder ein untergeordnetes Element in der Flexbox handelt, wird die Höhe durch den Randrahmen bestimmt.

Inline-Block-Elemente:

div {
  Hintergrundfarbe: #ccc;
  Farbe: #fff;
}
Spanne {
  Anzeige: Inline-Block;
  Höhe: 30px;
  Rand: 10px;
  Hintergrund: #fff;
  Farbe: rot;
}
<div>xxx<span>xxx</span>xxx</div> 

Hier beträgt die Höhe der span -Inline-Box Höhe + Rand 2 . Wenn der Wert für „height“ (Höhe) „auto“ (automatisch) ist, entspricht die Höhe der Zeilenhöhe + Rand 2.

Wenn es sich um ein nicht ersetztes Element handelt, wird die Höhe durch seine Zeilenhöhe und nicht durch den Inhaltsbereich bestimmt, obwohl es manchmal so aussieht, als würde der Inhaltsbereich die Höhe des Zeilenfelds überschreiten.

div {
  Hintergrundfarbe: #ccc;
  Schriftgröße: 20px;
  Farbe: #fff;
  Schriftfamilie: Sana;
}
Spanne {
  Hintergrund: #fff;
  Farbe: rot;
}
<div>xxx<span>xxx</span>xxx</div> 

Dieses Bild zeigt deutlich, dass es die Zeilenhöhe und nicht der Inhaltsbereich ist, die das Zeilenfeld streckt.

In diesem Artikel wird die Höhe des virtuellen Bereichs zur Darstellung der Zeilenhöhe verwendet. Nach meinem Verständnis handelt es sich dabei eigentlich um die Höhe der Inline-Box.

Der höchste und der niedrigste Punkt aller Inline-Boxen in der Linienbox bestimmen deren Höhe (in diese Berechnung wird die Höhe der Strebe einberechnet, die später noch erwähnt wird).

Der Rand, die Polsterung und die Grenze nicht ersetzter Elemente wirken sich nicht auf die Berechnung der Zeilenboxhöhe aus. Wenn die Zeilenhöhe einer Inline-Level-Box kleiner als der Inhaltsbereich ist, ist die Höhe der Zeilenbox kleiner als der Inhaltsbereich. Zu diesem Zeitpunkt laufen der Hintergrund und die Polsterung des Elements über die Zeilenbox hinaus.

Der folgende Code veranschaulicht dieses Problem:

div {
    Hintergrund: #eee;
    Rand: 1px durchgezogen #000;
    Box-Größe: Rahmenbox;
    Schriftgröße: 50px;
    Zeilenhöhe: 10px;
}
Spanne {
    Hintergrund: rot;
    Rand: 10px;
    Polsterung: 10px;
}
<div><span>xxx</span></div> 

führend:

Der Abstand zwischen der Höhe des Inhaltsbereichs und der Höhe der Inline-Box ist der Zeilenabstand. Dieser Zeilenabstand wird oben und unten im Inhaltsbereich gleichmäßig hinzugefügt, sodass sich der Inhaltsbereich immer in der Mitte der Inline-Box befindet (vertikal zentriert).

Strebe:

Der Browser geht davon aus, dass sich am Anfang jeder Zeilenbox eine anonyme Inline-Box mit einer Breite von 0 und ohne Zeichen befindet, die als Strebe bezeichnet wird. Diese Strebe erbt die Zeilenhöhe vom übergeordneten Element, sodass ihre Höhe die Berechnung der Höhe der gesamten Zeilenbox beeinflusst.

Ein Beispiel

div { Hintergrund: #eee; Rahmen: 1px durchgezogen #000; Boxgröße: Rahmenbox; }
<div><img src="./image.png" alt=""></div>

Auf dem Bild sieht man, dass zwischen img und dem äußeren div eine Lücke klafft, welche durch die oben erwähnte Strebe entsteht.

In diesem Beispiel wird die Unterkante des img standardmäßig an der Grundlinie des übergeordneten Elements ausgerichtet ( img { vertical-align: baseline } ), wo sich tatsächlich die Grundlinie der Streben befindet. Wie in der folgenden Abbildung dargestellt:

Die Strebe entspricht eigentlich einem unsichtbaren Buchstaben x. Wie oben erwähnt, hat die Strebe selbst eine Zeilenhöhe, sodass am unteren Rand des Bildes eine zusätzliche Lücke entsteht.

Um die Gründe für die Lücke zusammenzufassen:

• Strut hat Zeilenhöhe
• Der Standardwert für die vertikale Ausrichtung ist die Grundlinie.

Die entsprechende Lösung:

• Ändern Sie die Zeilenhöhe von Strut. Da die Zeilenhöhe von Strut nicht direkt festgelegt werden kann, müssen Sie die Zeilenhöhe des übergeordneten Elements festlegen und sie dann von Strut erben lassen oder die Schriftgröße ändern.
• Stellen Sie die vertikale Ausrichtung auf einen anderen Wert als die Zeilenhöhe ein.

Das W3C erklärt die Zeilenhöhe wie folgt:

Bei einem Blockcontainerelement, dessen Inhalt aus Inline-Elementen besteht, gibt „line-height“ die Mindesthöhe der Zeilenfelder innerhalb des Elements an. Die Mindesthöhe besteht aus einer Mindesthöhe über der Grundlinie und einer Mindesttiefe darunter, genau so, als ob jedes Zeilenfeld mit einem Inline-Feld mit der Breite Null und den Schriftart- und Zeilenhöheneigenschaften des Elements beginnt. Wir nennen dieses imaginäre Feld eine „Strebe“.

Mein einfaches Verständnis ist, dass bei Blockelementen, die aus Inline-Elementen bestehen, die Zeilenhöhe die Mindesthöhe der Zeilenbox bestimmt. Der Browser geht davon aus, dass jede Zeilenbox mit einer Inline-Box (Strebe) mit einer Breite von 0 beginnt und diese Strebe Schriftart und Zeilenhöhe vom übergeordneten Element erbt.

• „Normal“ ist der Standardwert der Zeilenhöhe und das W3C hat keine klare Definition dafür. Im Normalfall wird der Inhaltsbereich als Berechnungsfaktor verwendet.
• Die Zeilenhöhe ist nicht der Abstand zwischen zwei Grundlinien.
• Es wird empfohlen, für line-height numerische Werte anstelle von Em-Einheiten zu verwenden, da Em-Einheiten die Zeilenhöhe basierend auf font-size berechnen.

vertikale Ausrichtung

W3C definiert Baseline und Middle wie folgt:

Grundlinie: Richten Sie die Grundlinie der Box an der Grundlinie der übergeordneten Box aus. Wenn die Box keine Grundlinie hat, richten Sie den unteren Rand an der Grundlinie der übergeordneten Box aus.

Die Grundlinie des Elements wird an der Grundlinie des übergeordneten Elements ausgerichtet. Wenn das Element keine Grundlinie hat, wie z. img , wird die untere Randkante an der Grundlinie des übergeordneten Elements ausgerichtet.

Mitte: Richten Sie den vertikalen Mittelpunkt der Box an der Grundlinie der übergeordneten Box plus der halben x-Höhe des übergeordneten Elements aus.

Der vertikale Mittelpunkt des Elements wird an der Grundlinie des übergeordneten Elements plus der halben x-Höhe ausgerichtet.

siehe

CSS im Detail: Schriftmetriken, Zeilenhöhe und vertikale Ausrichtung
https://meyerweb.com/eric/css/inline-format.html
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
https://www.w3.org/TR/CSS2/visudet.html#inline-box-height