Wie wird die Höhe von Content-Boxen für Block- und Inline-Elemente bestimmt?

Höhe der Inhaltsbox in Block- und Inline-Elementen bestimmen

Höhe von Blockelementen verstehen

In Elementen auf Blockebene ist die Höhe der Die Inhaltsbox wird durch den Abstand vom oberen Rand des Inhalts zu einem der folgenden Elemente definiert (abhängig vom Vorhandensein eines Inline-Formatierungskontexts (IFC) oder Blockformatierungskontexts (BFC)):

1. Der untere Rand des letzten Zeilenfelds in einem IFC
2. Der untere Rand des letzten einfließenden untergeordneten Elements in einem BFC

Wenn für das Element explizit eine Höhe festgelegt wurde, wird die Höhe von Die Inhaltsbox ist einfach dieser Wert.

Höhe des Inline-Elements

Bei Inline-Elementen ist die Höhe der Inhaltsbox nicht explizit definiert und hängt von der Schriftgröße und anderen Schrifteigenschaften ab. Der vertikale Rand, der Rahmen und der Abstand eines Inline-Elements beginnen oben und unten im Inhaltsfeld, haben jedoch keinen Einfluss auf die Höhe des Zeilenfelds.

Beispiel: Höhe bestimmen

Im bereitgestellten HTML-Snippet ist die Höhe der Inhaltsfelder wie folgt:

• Absatz (

  ): Die Höhe entspricht der Zeilenhöhe (2em), weil es eine IFC mit einer Zeile erstellt.

• Div (
  ): Aus dem gleichen Grund auch gleich der Zeilenhöhe (2em).
• Span (): Die Höhe variiert mit der Zeilenhöhe, was darauf hinweist, dass die Höhe durch die Schriftarteigenschaften und nicht durch die Zeilenhöhe definiert wird.

Das obige ist der detaillierte Inhalt vonWie wird die Höhe von Content-Boxen für Block- und Inline-Elemente bestimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!