Umfassendes Verständnis von Linienhöhe und vertikaler Ausrichtung

Zeilenhöhe, Schriftgröße und vertikaler Align sind Schlüsselattribute für die Festlegung des Layouts von Elementen innerhalb der Zeile. Diese drei Attribute sind voneinander abhängige Beziehungen, und die Änderung des Abstands zwischen Zeilen und der Festlegung vertikaler Ausrichtungen erfordert ihre gemeinsamen Anstrengungen. Der relevante Inhalt der Schriftgröße wurde in CSS-Schriftarten ausführlich eingeführt. In diesem Artikel wird hauptsächlich Linienhöhe und vertikale Ausrichtung vorgestellt.

Die Zeilenhöhe der Linienhöhe bezieht sich auf den Abstand zwischen den Baselines der Textlinie. Die Linienhöhe beeinflusst tatsächlich nur Inline-Elemente und andere Inline-Inhalte und wirkt sich nicht direkt auf Elemente auf Blockebene aus. Sie können auch die Zeilenhöhe für ein Element auf Blockebene festlegen. Dieser Wert wirkt sich jedoch nur aus, wenn sie auf den Inhalt von Elementen auf Blockebene angewendet werden. Deklarieren Sie eine Linienhöhe auf einem Element auf Blockebene, setzt eine Mindesthöhe für die Linienbox für den Inhalt des Elements auf Blockebene

Wert: <Länge> | <Prozentsatz> | <nummer> | Normal | erben

Anfangswert: Normal

Angewendet auf: alle Elemente

Erbschaft: Ja

Prozentsatz: Schriftgröße im Vergleich zum Element

Um die Linienhöhe ausführlich zu verstehen, müssen Sie gemeinsame Begriffe über die Linienhöhe verstehen.

Für nicht ersetzende Elemente oder einen Teil des anonymen Textes in der Zeile bestimmen Schriftgröße und Schriftfamilie die Höhe des Inhaltsbereichs. Wenn die Schriftgröße eines Elements in einer Reihe 15px beträgt, beträgt die Höhe des Inhaltsbereichs 15px. In anderen Schriftarten entspricht die Höhe des Inhaltsbereichs nicht der Schriftgröße.

Der Inhaltsbereich plus der Linienabstand entspricht der Line-Inline-Box. Wenn die Schriftgröße eines Nicht-Replacement-Elements in einer Zeile 15px beträgt und die Linienhöhe 21px beträgt, beträgt die Differenz 6px. Der Benutzeragent unterteilt diese 6 Pixel in zwei und gilt die Hälfte der Ober- und Unterseite des Inhaltsbereichs, wodurch die Linie innerhalb der Box verleiht

Wenn die Linienhöhe weniger als Schriftgröße ist, ist das Line-in-Line-Box tatsächlich geringer als der Inhaltsbereich

Das Zeilenfeld ist definiert als der Abstand zwischen der Oberseite des Innenfelds mit der höchsten Zeile in der Zeile und dem unteren Bereich der niedrigsten Zeile innere Kästchen, und die Oberseite jedes Zeilenfelds befindet sich neben der Unterseite des Feldes der vorherigen Zeile.

Der innere Rand, der äußere Rand und der Rand haben die Höhe des Linienrahmens nicht beeinflusst, dh die Linienhöhe nicht beeinflusst.

Die Grenzgrenze von Inline-Elementen wird durch Schriftgröße anstelle von Linienhöhe gesteuert

Die Ränder werden nicht auf die obere und untere Rande der nicht erfüllenden Elemente in der Reihe angewendet

Rand-links, Polsterlinks, Grenz-Links werden auf den Beginn des Elements angewendet; Margin-Right, Padding-Rechts, Grenzrechte werden bis zum Ende des Elements angewendet

Das Ersetzen von Elementen innerhalb einer Zeile erfordert die Verwendung von Linienhöhenwerten, um Elemente korrekt zu positionieren, wenn sie vertikal ausgerichtet sind. Weil der prozentuale Wert von vertikaler Align relativ zur Linienhöhe des Elements berechnet wird. Für die vertikale Ausrichtung ist die Höhe des Bildes selbst irrelevant. Der Schlüssel ist der Wert der Linienhöhe

Standardmäßig befindet sich das Inline -Ersatzelement an der Grundlinie. Wenn Sie dem Ersatzelement den inneren Rand, den äußeren Rand oder die Grenze hinzufügen, wird der Inhaltsbereich erhöht. Die Grundlinie des Ersatzelements ist die Grundlinie des letzten Zeilenfelds im normalen Stream. Es sei denn

Vertikale Ausrichtung wird verwendet, um die vertikale Ausrichtung einzustellen. Alle vertikal ausgerichteten Elemente beeinflussen die Zeilenhöhe.

Wert: Baseline | sub | Super | Top | Text-Top | Mitte | unten | Textboden | <Länge> | <Prozentsatz> | erben

Anfangswert: Basislinie

Angewendet auf: Inline-Elemente, Ersatzelemente, Tabellenzellen

Vererbung: Keine

Prozentsatz: Linienhöhe relativ zu Element-Linienhöhe

[Anmerkung] Der prozentuale Wert von vertikalem Align in IE7-Browser unterstützt keine Dezimalzeilenhöhe, und der Anzeigeeffekt unterscheidet sich von der von Standardbrowsern, wenn Basislinie, Mitte, Textboden usw. eingenommen werden. Die häufig verwendete Lösung besteht darin, die Anzeige festzulegen: Inline-Block in den Zeilenelementen.