Wie wirkt sich die Zeilenhöhe auf die Höhe von Block- und Inline-Elementen aus?-CSS-Tutorial-php.cn

Wie wirkt sich die Zeilenhöhe auf die Höhe von Block- und Inline-Elementen aus?

Linda Hamilton

Freigeben： 2024-11-10 22:08:02

Original

635 Leute haben es durchsucht

How Does Line-Height Impact the Height of Block and Inline Elements?

Bestimmen der Höhe der Inhaltsbox für Block- und Inline-Elemente

Blockelemente

Bei Blockelementen kann die Höhe der Inhaltsbox bestimmt werden mithilfe der line-height-Eigenschaft auf folgende Weise bestimmt werden:

Wenn keine untergeordneten Elemente, Auffüllungen oder Ränder auf Blockebene vorhanden sind, wird die Höhe des Elements durch die line-height bestimmt.
Wenn das Blockelement einen Inline-Formatierungskontext (IFC) einrichtet, wird die Höhe durch das letzte Zeilenfeld definiert, das durch die Zeilenhöhe festgelegt wird.
Wenn das Blockelement einen Blockformatierungskontext einrichtet (BFC) wird die Höhe durch die Höhe des letzten einfließenden untergeordneten Elements (einschließlich reduzierter Ränder) oder durch die untere Randkante dieses untergeordneten Elements bestimmt (wenn sein oberer Rand nicht mit dem unteren Rand des Elements zusammenfällt).

Inline-Elemente

Für Inline-Elemente gilt die Höheneigenschaft nicht. Stattdessen basiert die Höhe des Inhaltsbereichs auf den verwendeten Schriftartmetriken und kann nicht explizit durch CSS-Eigenschaften gesteuert werden. Der Inhaltsbereich sollte immer in das Zeilenfeld passen, die genaue Höhe kann jedoch je nach Schriftart und Rendering-Engine variieren.

Um den Unterschied zu veranschaulichen, betrachten Sie den folgenden Codeausschnitt:

<p>

Nach dem Login kopieren

In diesem Beispiel bilden die Elemente div und p eine IFC, sodass die Höhe des Zeilenrahmens mit der Zeilenhöhe übereinstimmt. Beim Inline-Span-Element wird die Höhe des Inhaltsbereichs jedoch durch die Schriftartmetriken bestimmt und kann von der Zeilenhöhe abweichen.

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