10 Details zum visuellen Formatierungsmodell

Inhaltsverzeichnis

10.1 Definition des „umschließenden Blocks“

Die Position und die Größe der Boxen eines Elements werden manchmal relativ zu einem bestimmten Rechteck berechnet, dem umschließenden Block („containing block“) des Elements. Der umschließende Block eines Elements ist wie folgt definiert:

  1. Der umschließende Block (auch als umschließender Ausgangsblock bezeichnet), in dem sich das Wurzelelement befindet, wird vom Benutzerprogramm ausgewählt.
  2. Für andere Elemente wird der umschließende Block durch die Inhaltskante der nächsten benachbarten Box auf Blockebene gebildet, es sei denn, das Element ist absolut positioniert.
  3. Ist für das Element 'position: fixed' gesetzt, wird der umschließende Block durch den Viewport eingerichtet.
  4. Ist für das Element 'position: absolute' gesetzt, wird der umschließende Block durch den nächsten Vorfahren mit einer anderen 'position' als 'static' eingerichtet, und zwar wie folgt:
    • Falls es einen Vorfahren auf Blockebene gibt, wird der umschließende Block durch die Polsterungskante (padding) des Vorfahren gebildet.
    • Falls der Vorfahre auf Inline-Ebene liegt, ist der umschließende Block von der 'direction'-Eigenschaft des Vorfahren abhängig.
      • Falls die 'direction' gleich 'ltr' ist, sind die obere und linke Kante des umschließenden Blocks gleich der oberen und linken Inhaltskante der ersten durch den Vorfahren erzeugten Box, und die untere und die rechte Kante sind die untere und rechte Inhaltskante der letzten Box des Vorfahren.
      • Falls 'direction' gleich 'rtl' ist, sind die obere und rechte Kante gleich der oberen und rechten Kante der ersten von dem Vorfahren erzeugten Box, und die untere und linke Kante sind die untere und linke Inhaltskante der letzten Box des Vorfahren.
    Falls es keinen solchen Vorfahren gibt, richtet die Inhaltskante der Box des Wurzelelements den umschließenden Block ein.

Beispiel

Ohne Positionierung werden die umschließenden Blöcke im folgenden Dokument wie nachfolgend eingerichtet.

<HTML>
   <HEAD>
      <TITLE>Demonstration umschließender Blöcke</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Dieser Text befindet sich im ersten Absatz...</P>
      <P id="p2">Dies ist Text <EM id="em1"> im 
      <STRONG id="strong1">zweiten</STRONG> Absatz.</EM></P>
      </DIV>
   </BODY>
</HTML>

Für eine Box, die erzeugt wurde von wird der umschließende Block eingerichtet von
body umschließender Ausgangsblock (vom Benutzerprogramm abhängig)
div1 body
p1 div1
p2 div1
em1 P2
strong1 P2

Wenn wir „div1“ positionieren:

   #div1 { position: absolute; left: 50px; top: 50px }

ist sein umschließender Block nicht mehr „body“; er wird zum anfänglichen umschließenden Block (weil es keine anderen positionierten Vorfahren-Boxen gibt).

Wenn wir „em1“ ebenfalls positionieren:

#div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

sieht die Tabelle der umschließenden Blöcke wie folgt aus:

Für eine Box, die erzeugt wurde von wird der umschließende Block eingerichtet von
body umschließender Ausgangsblock
div1 umschließender Ausgangsblock
p1 div1
p2 div1
em1 div1
strong1 em1

Durch die Positionierung von „em1“ wird sein umschließender Block die am nächsten positionierte Vorfahren-Box (also jene, die durch „div1“ erzeugt wurde).

10.2 Inhaltsbreite : die 'width'-Eigenschaft

'width'

Wert:

<length> | <percentage> | auto | inherit

Ausgangswert:

auto

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

visual

Diese Eigenschaft gibt die Inhaltsbreite von Boxen an, die auf Blockebene erzeugt wurden, sowie die Inhaltsbreite von ersetzten Elementen.

Diese Eigenschaft gilt nicht für nicht ersetzte Elemente auf Inline-Ebene. Die Breite der Boxen für ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts (vor jedem relativen Offset von untergeordneten Elementen). Beachten Sie, dass Inline-Boxen in Zeilen-Boxen einfließen. Die Breite von Zeilen-Boxen wird durch ihren umschließenden Block vorgegeben, ist aber bei Vorhandensein von Floats möglicherweise gekürzt.

Ein ersetztes Element hat eine eigene Box-Breite, die vom Benutzerprogramm skaliert werden kann, wenn diese Eigenschaft einen anderen Wert als 'auto' hat.

Die Werte haben die folgenden Bedeutungen:

<length>
Gibt eine feste Breite an.
<percentage>
Gibt eine prozentuale Breite an. Der Prozentwert wird relativ zur Breite des umschließenden Blocks der erzeugten Box berechnet.
auto
Die Breite ist von den Werten anderer Eigenschaften abhängig. Weitere Informationen finden Sie in den nachfolgenden Abschnitten.

Negative Werte für 'width' sind nicht erlaubt.

Beispiel

Die folgende Regel beispielsweise legt die Inhaltsbreite von Absätzen mit 100 Pixel fest:

P { width: 100px }

10.3 Breiten und Ränder berechnen

Die berechneten Werte der Eigenschaften 'width', 'margin-left', 'margin-right', 'left' und 'right' eines Elements sind vom Typ der erzeugten Box und voneinander abhängig. Im Prinzip sind die berechneten Werte dieselben wie die angegebenen Werte, wenn 'auto' durch einen geeigneten Wert ersetzt wird, aber es gibt Ausnahmen. Die folgenden Situationen müssen unterschieden werden:

  1. Inline, nicht-ersetzte Elemente
  2. Inline, ersetzte Elemente
  3. Blockebene, nicht-ersetzte Elemente im normalen Fluss
  4. Blockebene, ersetzte Elemente im normalen Fluss
  5. Floating, nicht-ersetzte Elemente
  6. Floating, ersetzte Elemente
  7. Absolut positioniert, nicht-ersetzte Elemente
  8. Absolut positioniert, ersetzte Elemente

Die Punkte 1-6 beinhalten eine relative Positionierung.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.1  Inline, nicht-ersetzte Elemente

Die 'width'-Eigenschaft wird nicht angewendet. Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.2  Inline, ersetzte Elemente

Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Wird für 'width' der Wert 'auto' angegeben, wird die eigene Breite des Elements als berechneter Wert angenommen.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.3  Blockebene, nicht-ersetzte Elemente im normalen Fluss

Werden 'left' oder 'right' als 'auto' angegeben, ist ihr berechneter Wert gleich 0. Zwischen den anderen Eigenschaften müssen die folgenden Bedingungen gelten:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = Breite des umschließenden Blocks

(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Ist für alle oben aufgeführten Werte ein anderer Wert als 'auto' angegeben, sagt man, die Werte sind „überspezifiziert“ und einer der berechneten Werte muss sich von dem angegebenen Wert unterscheiden. Hat die 'direction'-Eigenschaft den Wert 'ltr', wird der angegebene Wert von 'margin-right' ignoriert, und der Wert wird berechnet, so dass die Gleichung stimmt. Ist der Wert von 'direction' gleich 'ltr', findet dies statt dessen auf 'margin-left' Anwendung.

Ist genau ein Wert als 'auto' angegeben, folgt sein berechneter Wert aus der Gleichung.

Ist 'width' auf 'auto' gesetzt, werden alle anderen 'auto'-Werte zu '0', und 'width' folgt aus der resultierenden Gleichung.

Sind sowohl 'margin-left' als auch 'margin-right' gleich 'auto', dann sind ihre berechneten Werte gleich.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.4  Blockebene, ersetzte Elemente im normalen Fluss

Sind 'left' oder 'right' gleich 'auto', ist ihr berechneter Wert gleich 0. Ist 'width' als 'auto' angegeben, ist sein Wert die eigene Breite des Elements. Ist einer der Ränder als 'auto' angegeben, wird sein berechneter Wert durch die obigen Bedingungen festgelegt. Sind darüber hinaus beide Ränder gleich 'auto', sind ihre berechneten Werte gleich.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.5  Floating, nicht-ersetzte Elemente

Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.6  Floating, ersetzte Elemente

Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'. Ist 'width' gleich 'auto', ist sein Wert die eigene Breite des Elements.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.7  Absolute Positionierung, nicht-ersetzte Elemente

Die Bedingung, die die Berechnung für diese Elemente festlegt, ist die Folgende:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = Breite des umschließenden Blocks

(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die Lösung für diese Bedingung wird gefunden, indem einige Ersetzungen in der folgenden Reihenfolge vorgenommen werden:

  1. Wenn 'left' den Wert 'auto' hat, während 'direction' gleich 'ltr' ist, ersetzen Sie 'auto' durch den Abstand von der linken Kante des umschließenden Blocks zur linken Randkante einer hypothetischen Box, die die erste Box des Elements wäre, wenn dessen 'position'-Eigenschaft gleich 'static' wäre. (Statt jedoch diese Box tatsächlich zu berechnen, steht es den Benutzerprogrammen frei, eine Schätzung der wahrscheinlichen Position vorzunehmen.) Der Wert ist negativ, wenn sich die hypothetische Box links vom umschließenden Block befindet.
  2. Wenn 'right' den Wert 'auto' hat und 'direction' gleich 'rtl' ist, ersetzen Sie 'auto' durch den Abstand von der rechten Kante des umschließenden Blocks zur rechten Randkante derselben hypothetischen Box wie oben. Der Wert ist positiv, wenn sich die hypothetische Box links von der Kante des umschließenden Blocks befindet.
  3. Ist 'width' gleich 'auto', ersetzen Sie jedes weitere 'auto' für 'left' oder 'right' durch '0'.
  4. Sind 'left', 'right' oder 'width' (immer noch) 'auto', ersetzen Sie jedes 'auto' für 'margin-left' oder 'margin-right' durch '0'.
  5. Sind jetzt 'margin-left' und 'margin-right' immer noch 'auto', lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder denselben Wert erhalten müssen.
  6. Ist an dieser Stelle nur noch ein 'auto' übrig, lösen Sie die Gleichung für diesen Wert auf.
  7. Sind die Werte an dieser Stelle überspezifiziert, ignorieren Sie den Wert für 'left' (falls 'direction' gleich 'rtl') oder 'right' (falls 'direction' gleich 'ltr' ist) und lösen für diesen Wert auf.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.3.8  Absolute Positionierung, ersetzte Elemente

Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene Breite hat. Die Abfolge der Ersetzungen ist jetzt:

  1. Ist 'width' gleich 'auto', ersetzen Sie die eigene Breite des Elements.
  2. Wenn 'left' den Wert 'auto' hat, während 'direction' gleich 'ltr' ist, ersetzen Sie 'auto' durch den Abstand von der linken Kante des umschließenden Blocks zur linken Randkante einer hypothetischen Box, die die erste Box des Elements wäre, wenn dessen 'position'-Eigenschaft gleich 'static' wäre. (Statt jedoch diese Box tatsächlich zu berechnen, steht es den Benutzerprogrammen frei, eine Schätzung an der wahrscheinlichen Position vorzunehmen.) Der Wert ist negativ, wenn sich die hypothetische Box links vom umschließenden Block befindet.
  3. Wenn 'rigth' den Wert 'auto' hat und 'direction' gleich 'rtl' ist, ersetzen Sie 'auto' durch den Abstand von der rechten Kante des umschließenden Blocks zur rechten Randkante derselben hypothetischen Box wie oben. Der Wert ist positiv, wenn sich die hypothetische Box links von der Kante des umschließenden Blocks befindet.
  4. Sind 'left' oder 'right' gleich 'auto' , ersetzen Sie jedes 'auto' für 'margin-left' oder 'margin-right' durch '0'.
  5. Sind an dieser Stelle sowohl 'margin-left' als auch 'margin-right' immer noch 'auto', lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder denselben Wert erhalten müssen.
  6. Ist an dieser Stelle nur noch ein 'auto' übrig, löschen Sie die Gleichung für diesen Wert.
  7. Sie die Werte an dieser Stelle überspezifiziert, ignorieren Sie den Wert für 'left' (falls 'direction' gleich 'rtl' ist) oder 'right' (falls 'direction' gleich 'ltr' ist) und lösen für diesen Wert.

10.4 Minimale und maximale Breiten: 'min-width' und 'max-width'

'min-width'

Wert:

<length> | <percentage> | inherit

Ausgangswert:

Vom Benutzerprogramm abhängig

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

visual

'max-width'

Wert:

<length> | <percentage> | none | inherit

Ausgangswert:

Vom Benutzerprogramm abhängig

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

visual

Diese beiden Eigenschaften erlauben es Autoren, Box-Breiten auf einen bestimmten Bereich einzugrenzen. Die Werte haben die folgenden Bedeutungen:

<length>
Gibt eine feste minimale oder maximale berechnete Breite an.
<percentage>
Gibt einen Prozentwert für die Ermittlung des berechneten Werts an. Der Prozentwert wird relativ zur Breite des umschließenden Blocks der erzeugten Box berechnet.
none
(Nur für 'max-width') Es gibt keine Beschränkung für die Breite der Box.

Der folgende Algorithmus beschreibt, wie die beiden Eigenschaften den berechneten Wert der 'width'-Eigenschaft beeinflussen:

  1. Die Breite wird nach den unter „Berechnung von Breiten und Rändern“ beschriebenen Regeln berechnet (ohne 'min-width' und 'max-width').
  2. Ist der berechnete Wert von 'min-width' größer als der Wert von 'max-width', wird 'max-width' auf den Wert von 'min-width' gesetzt.
  3. Ist die berechnete Breite größer als 'max-width', werden die obigen Regeln erneut angewendet, aber jetzt wird der Wert von 'max-width' als der für 'width' angegebene Wert verwendet.
  4. Ist der berechnete Wert kleiner als 'min-width', werden die obigen Regeln erneut angewendet, aber jetzt wird der Wert von 'min-width' als der für 'width' angegebene Wert verwendet.
Das Benutzerprogramm kann einen nicht negativen Mindestwert für die 'min-width'-Eigenschaft angeben, der von Element zu Element variieren und sogar von anderen Eigenschaften abhängig sein kann. Geht 'min-width' unter diesen Grenzwert, entweder, weil es explizit gesetzt wurde, oder weil es 'auto' war und die nachfolgenden Regeln es zu klein gemacht hätten, kann das Benutzerprogramm den Mindestwert als den berechneten Wert verwenden.

10.5 Inhaltshöhe : die 'height'-Eigenschaft

'height'

Wert:

<length> | <percentage> | auto | inherit

Ausgangswert:

auto

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen

Vererbt:

Nein

Prozentwerte:

Siehe Text

Medium:

visual
Diese Eigenschaft gibt die Inhaltshöhe von Boxen an, die auf Blockebene erzeugt wurden, sowie von ersetzten Elementen.Diese Eigenschaft bezieht sich nicht auf nicht ersetzte inzeilige Elemente. Die Höhe der Boxen eines nicht-ersetzten Inline-Elements wird durch den (möglicherweise geerbten) 'line-height'-Wert des Elements angegeben.Die Werte haben die folgenden Bedeutungen:
<length>
Gibt eine feste Höhe an.
<percentage>
Gibt eine prozentuale Höhe an. Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Wird die Höhe des umschließenden Blocks nicht explizit angegeben (das heißt, ist sie demnach von der Inhaltshöhe abhängig), wird der Wert als 'auto' interpretiert.
auto
Die Höhe ist von den Werten anderer Eigenschaften abhängig. Weitere Informationen finden Sie im nachfolgenden Text.

Negative Werte für 'height' sind nicht erlaubt.

Beispiel

Die folgende Regel beispielsweise legt die Höhe von Absätzen auf 100 Pixel fest:

P { height: 100px }

Absätze, für die eine Höhe von mehr als 100 Pixel erforderlich ist, erzeugen gemäß der 'overflow'-Eigenschaft einen Überlauf.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6 Höhen und Ränder berechnen

Zur Berechnung der Werte für 'top', 'margin-top', 'height', 'margin-bottom' und 'bottom' muss zwischen den verschiedenen Box-Typen unterschieden werden:

  1. Inline, nicht-ersetzte Elemente
  2. Inline, ersetzte Elemente
  3. Blockebene, nicht-ersetzte Elemente im normalen Fluss
  4. Blockebene, ersetzte Elemente im normalen Fluss
  5. Floating, nicht-ersetzte Elemente
  6. Floating, ersetzte Elemente
  7. Absolut positioniert, nicht-ersetzte Elemente
  8. Absolut positioniert, ersetzte Elemente

Die Punkte 1-6 beinhalten eine relative Positionierung.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6.1  Inline, nicht-ersetzte Elemente

Wird für 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'. Die 'height'-Eigenschaft wird nicht angewendet, aber die Höhe der Box wird durch die 'line-height'-Eigenschaft angegeben.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6.2  Inline, ersetzte Elemente, Blockebene, ersetzte Elemente im normalen Fluss, und Floating, ersetzte Elemente

Wird für 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Ist 'height' gleich 'auto', ist der berechnete Wert die eigene Höhe.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6.3  Blockebene, nicht ersetzte Elemente im normalen Fluss, und Floating, nicht ersetzte Elemente

Sind 'top', 'bottom', 'margin-top' oder 'margin-bottom' gleich 'auto', ist ihr berechneter Wert 0. Ist 'height' gleich 'auto', ist die Höhe davon abhängig, ob das Element untergeordnete Elemente auf Blockebene hat. Wenn es nur untergeordnete inzeilige Elemente hat, reicht die Höhe von der obersten Kante der obersten Zeilen-Box bis zur untersten Kante der untersten Zeilen-Box. Hat es untergeordnete Elemente auf Blockebene, ist sie der Abstand zwischen der obersten Rahmenkante der Box des obersten untergeordneten Elements auf Blockebene bis zur untersten Rahmenkante der Box des untersten untergeordneten Elements auf Blockebene. Nur untergeordnete Elemente im normalen Fluss werden berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert, und relativ positionierte Boxen werden ohne ihren Offset betrachtet.) Beachten Sie, dass die Box des untergeordneten Elements eine anonyme Box sein kann.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6.4  Absolute Positionierung, nicht-ersetzte Elemente

Für absolut positionierte Elemente müssen die vertikalen Ausmaße die folgende Bedingung erfüllen:

'top' + 'margin-top'+ 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = Höhe des umschließenden Blocks

(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die Lösung für diese Bedingung wird durch mehrere Ersetzungen in der folgenden Reihenfolge erzielt:

  1. Hat 'top' den Wert 'auto', ersetzen Sie es durch den Abstand von der oberen Kante des umschließenden Blocks zur oberen Randkante einer hypothetischen Box, die die erste Box des Elements wäre, wenn seine 'position'-Eigenschaft 'static' wäre. (Statt jedoch diese Box zu berechnen, können die Benutzerprogramme ihre wahrscheinliche Position auch schätzen.) Der Wert ist negativ, wenn sich die hypothetische Box oberhalb des umschließenden Blocks befindet.
  2. Sind sowohl 'height' als auch 'bottom' gleich 'auto', ersetzen Sie 'bottom' durch '0'.
  3. Sind 'bottom' oder 'height' (immer noch) 'auto', ersetzen Sie jedes 'auto' für 'margin-top' oder 'margin-bottom' durch '0'.
  4. Sind an dieser Stelle 'margin-top' und 'margin-bottom' immer noch 'auto', lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten müssen.
  5. Ist an dieser Stelle nur noch ein 'auto' übrig, lösen Sie die Gleichung für diesen Wert.
  6. Sind an dieser Stelle die Werte überspezifiziert, ignorieren Sie den Wert für 'bottom' und lösen Sie die Gleichung für diesen Wert.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.6.5  Absolute Positionierung, ersetzte Elemente

Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene Höhe hat. Die Abfolge der Ersetzungen sieht jetzt wie folgt aus:

  1. Wenn 'height' gleich 'auto' ist, setzen Sie statt dessen die eigene Höhe des Elements ein.
  2. Hat 'top' den Wert 'auto', ersetzen Sie es durch den Abstand von der oberen Kante des umschließenden Blocks zur oberen Randkante einer hypothetischen Box, die die erste Box des Elements wäre, wenn seine 'position'-Eigenschaft 'static' wäre. (Statt jedoch diese Box zu berechnen, können die Benutzerprogramme ihre wahrscheinliche Position auch schätzen.) Der Wert ist negativ, wenn sich die hypothetische Box oberhalb des umschließenden Blocks befindet.
  3. Ist 'bottom' gleich 'auto', ersetzen Sie jedes 'auto' für 'margin-top' oder 'margin-bottom' durch '0'.
  4. Sind an dieser Stelle 'margin-top' und 'margin-bottom' immer noch 'auto', lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten müssen.
  5. Ist an dieser Stelle nur noch ein 'auto' übrig, lösen Sie die Gleichung für diesen Wert.
  6. Sind an dieser Stelle die Werte überspezifiziert, ignorieren Sie den Wert für 'bottom' und lösen Sie die Gleichung für diesen Wert.

10.7 Mindest- und Maximalhöhen: 'min-height' und 'max-height'

Manchmal ist es sinnvoll, die Höhe von Elementen auf einen bestimmten Bereich zu begrenzen. Zwei Eigenschaften realisieren diese Funktionalität:

'min-height'

Wert:

<length> | <percentage> | inherit

Ausgangswert:

0

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Höhe des umschließenden Blocks

Medium:

visual

'max-height'

Wert:

<length> | <percentage> | none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Höhe des umschließenden Blocks

Medium:

visual

Diese beiden Eigenschaften gestatten es Autoren, Box-Höhen auf einen bestimmten Bereich zu begrenzen. Werte haben die folgenden Bedeutungen:

<length>
Gibt eine minimale oder maximale berechnete Höhe an.
<percentage>
Gibt einen Prozentwert für die Ermittlung des berechneten Werts an. Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Ist die Höhe des umschließenden Blocks nicht explizit angegeben (das heißt, sie ist von der Inhaltshöhe abhängig), wird der Prozentwert als 'auto' interpretiert.
none
(Nur für 'max-height'). Es gibt keine Begrenzung für die Höhe der Box.

Der folgende Algorithmus beschreibt, wie diese beiden Eigenschaften den berechneten Wert der 'height'-Eigenschaft beeinflussen:

  1. Die Höhe wird gemäß den Regeln aus dem obigen Abschnitt 10.6, „Höhen und Ränder berechnen“, berechnet (ohne 'min-height' und 'max-height').
  2. Ist der berechnete Wert von 'min-height' größer als der Wert von 'max-height', wird 'max-height' auf den Wert von 'min-height' gesetzt.
  3. Ist die berechnete Höhe größer als 'max-height', werden die obigen Regeln erneut angewendet, aber jetzt unter Verwendung des Wertes von 'max-height' als vorgegebenen Wert für 'height'.
  4. Ist der berechnete Wert kleiner als 'min-height', werden die obigen Regeln erneut angewendet, aber jetzt unter Verwendung des Werts von 'min-height' vorgegebenen Wert für 'height'.

10.8 Zeilenhöhenberechnungen: die Eigenschaften 'line-height' und 'vertical-align'

Wie im Abschnitt über Inline-Formatierungskontexte (9.4.2) beschrieben, führen Benutzerprogramme Inline-Boxen zu einem vertikalen Stapel aus Zeilen-Boxen zusammen. Die Höhe einer Zeilen-Box wird wie folgt ermittelt:

  1. Die Höhe jeder Inline-Box in der Zeilen-Box wird berechnet (siehe Abschnitt 10.6, „Höhen und Ränder berechnen“, und die Beschreibung der 'line-height'-Eigenschaft).
  2. Die Inline-Boxen werden vertikal gemäß ihrer 'vertical-align'-Eigenschaft ausgerichtet.
  3. Die Höhe der Zeilen-Box ist der Abstand zwischen der oberen Kante der obersten Box und der unteren Kante der untersten Box.

Leere inzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch Ränder, Auffüllung, Rahmen und eine Zeilenhöhe und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt.

Beachten Sie, dass die Zeilen-Box genau die Höhe der höchsten Box hat, wenn alle Boxen in der Zeilen-Box ihrer unteren Kante nach ausgerichtet sind. Sind die Boxen dagegen entlang einer gemeinsamen Grundlinie ausgerichtet, kann es sein, dass die obere und untere Kante der Zeilen-Box die untere und obere Kante der höchsten Box nicht berühren.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

10.8.1  Durchschuss und Halb-Durchschuss

Weil sich die Höhe einer inzeiligen Box von der Schriftgröße des Texts in der Box unterscheiden kann (z.B. 'line-height' > 1em), kann es Platz oberhalb und unterhalb der dargestellten Glyphen geben. Die Differenz zwischen der Schriftgröße und dem berechneten Wert von 'line-height' wird auch als Durchschuss bezeichnet. Die Hälfte des Durchschusses wird als Halb-Durchschuss bezeichnet.

Benutzerprogramme zentrieren Glyphen vertikal in einer Inline-Box und fügen einen Halb-Durchschuss oben und unten ein. Ist ein Textstück beispielsweise '12pt' hoch und der 'line-height' ist '14pt', sollten 2pt zusätzlicher Platz hinzugefügt werden: 1pt oberhalb und 1 pt unterhalb der Buchstaben. (Das gilt auch für leere Boxen, so als ob die leere Box einen unendlich schmalen Buchstaben enthalten würde.)

Ist der Wert von 'line-height' kleiner als die Schriftgröße, ist die Höhe der endgültigen Inline-Box kleiner als die Schriftgröße und die dargestellten Glypen „laufen aus der Box heraus“. Berührt eine solche Box die Kante einer Zeilen-Box, fließen die dargestellten Glyphen auch in die benachbarte Zeilen-Box ein.

Obwohl Ränder, Rahmen und Auffüllung nicht-ersetzter Elemente für die Höhenberechnung der Inline-Box (und damit die Berechnung der Zeilen-Box) nicht berücksichtigt werden, werden sie dennoch um die Inline-Boxen herum dargestellt. Das bedeutet, wenn die Höhe einer Zeilen-Box kleiner als die äußeren Kanten der darin enthaltenen Boxen sind, können Hintergründe und Farben von Auffüllung und Rahmen in benachbarte Zeilen-Boxen „einfließen“. In diesem Fall können die Benutzerprogramme die Zeilen-Box jedoch nutzen, um die Rahmen- und Auffüllbereiche „abzuschneiden“ (das heißt, sie nicht darzustellen).

'line-height'

Wert:

normal | <number> | <length> | <percentage> | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

Beziehen sich auf die Schriftgröße des eigentlichen Elements

Medium:

visual

Ist die Eigenschaft für ein Element auf Blockebene gesetzt, dessen Inhalt sich aus Elementen auf Inline-Ebene zusammensetzt, gibt sie die minimale Höhe jeder erzeugten Inline-Box an.

Ist die Eigenschaft für ein Element auf Inline-Ebene gesetzt, gibt sie die genaue Höhe jeder Box an, die von dem Element erzeugt wird. (Außer für ersetzte Inline-Elemente, bei denen die Höhe der Box durch die 'height'-Eigenschaft angegeben wird.)

Die Werte für diese Eigenschaft haben die folgenden Bedeutungen:

normal
Weist Benutzerprogramme an, den berechneten Wert auf einen „sinnvollen“ Wert abhängig von der Schriftgröße des Elements zu setzen. Der Wert hat dieselbe Bedeutung wie <number>. Wir empfehlen einen berechneten Wert zwischen 1.0 und 1.2 für 'normal'.
<length>
Die Box-Höhe wird auf diese Länge gesetzt. Negative Werte sind nicht erlaubt.
<number>
Der berechnete Wert der Eigenschaft ist diese Zahl multipliziert mit der Schriftgröße des Elements. Negative Werte sind nicht erlaubt. Die Zahl, nicht der berechnete Wert, wird vererbt.
<percentage>
Der berechnete Wert der Eigenschaft ist dieser Prozentwert multipliziert mit der berechneten Schriftgröße des Elements. Negative Werte sind nicht erlaubt.

Beispiel

Die drei Regeln im folgenden Beispiel erzeugen dieselbe Zeilenhöhe:

DIV { line-height: 1.2; font-size: 10pt }     /* Zahl */
DIV { line-height: 1.2em; font-size: 10pt }   /* Länge */
DIV { line-height: 120%; font-size: 10pt }    /* Prozentwert */

Enthält ein Element Text, der in mehreren Schriften dargestellt wird, sollten die Benutzerprogramme den 'line-height'-Wert anhand der größten Schriftgröße ermitteln.

Allgemein gilt, wenn es nur einen Wert von 'line-height' für alle Inline-Boxen in einem Absatz (und keine hohen Bilder) gibt, stellt die obige Aussage sicher, dass Grundlinien aufeinanderfolgender Zeilen genau 'line-height' voneinander entfernt sind. Das ist wichtig, wenn Spalten mit Text in unterschiedlichen Schriften ausgerichtet werden müssen, beispielsweise in einer Tabelle.

Beachten Sie, dass ersetzte Elemente eine 'font-size'- und eine 'line-height'-Eigenschaft haben, selbst wenn sie nicht direkt verwendet werden, um die Höhe der Box zu ermitteln. Die 'font-size' wird jedoch verwendet, um die Einheiten 'em' und 'ex' zu definieren, und die 'line-height'-Eigenschaft spielt eine Rolle in der 'vertical-align'-Eigenschaft.

'vertical-align'

Wert:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> <length> | inherit

Ausgangswert:

baseline

Angewendet auf:

Elemente auf Inline-Ebene und 'table-cell'-Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die 'line-height' des eigentlichen Elements

Medium:

visual

Diese Eigenschaft beeinflusst die vertikale Positionierung innerhalb einer Zeilen-Box der von einem Element auf Inline-Ebene erzeugten Boxen. Die folgenden Werte haben nur eine Bedeutung für ein übergeordnetes Element auf Inline-Ebene oder ein übergeordnetes Elemente auf Blockebene, wenn dieses Element anonyme Inline-Boxen erzeugt; sie haben keine Wirkung, wenn es keine solchen übergeordnete Elemente gibt.

Hinweis. Werte dieser Eigenschaft haben etwas unterschiedliche Bedeutungen im Kontext von Tabellen. Weitere Informationen finden Sie im Abschnitt über Algorithmen zur Ermittlung der Tabellenhöhe.

baseline
Richtet die Grundlinie der Box an der Grundlinie der übergeordneten Box aus. Hat die Box keine Grundlinie, wird die untere Kante der Box an der Grundlinie der Box des übergeordneten Elements ausgerichtet.
middle
Richtet den vertikalen Mittelpunkt der Box an der Grundlinie der übergeordneten Box plus der halben x-Höhe des übergeordneten Elements aus.
sub
Senkt die Grundlinie der Box für die richtige Position von Tiefstellungen der Box des übergeordneten Elements ab. (Dieser Wert hat keine Wirkung für die Schriftgröße des Elementtexts.)
super
Hebt die Grundlinie der Box für die richtige Position von Hochstellungen der Box des übergeordneten Elements an. (Dieser Wert hat keine Wirkung auf die Schriftgröße des Elementtexts.)
text-top
Richtet die obere Kante der Box an der oberen Kante der Schrift des übergeordneten Elements.
text-bottom
Richtet die untere Kante der Box an der unteren Kante der Schrift des übergeordneten Elements aus.
<percentage>
Hebt (positiver Wert) oder senkt (negativer Wert) die Box um diesen Abstand. Der Wert '0cm' hat dieselbe Bedeutung wie 'baseline'.

Die restlichen Werte beziehen sich auf die Zeilen-Box, in der die erzeugte Box erscheint:

top
Richtet die obere Kante der Box an der oberen Kante der Zeilen-Box aus.
bottom
Richtet die obere Kante der Box an der oberen Kante der Zeilen-Box aus.

Dokument erstellt 04/02/2006, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-rf-kap10.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.

Referenzen

  1. Zeigen Sie - html-Dokument Sprache des Dokuments:de CSS2-Spezifikation : http://www.edition-w3.de

Diese Verweise und Links verweisen auf Dokumente, die während des Schreibens dieser Seite konsultiert wurden, oder die zusätzliche Informationen liefern können, aber die Autoren dieser Quellen können nicht für den Inhalt dieser Seite verantwortlich gemacht werden.
Der Autor Diese Website ist allein dafür verantwortlich, wie die verschiedenen Konzepte und Freiheiten, die mit den Nachschlagewerken gemacht werden, hier dargestellt werden. Denken Sie daran, dass Sie mehrere Quellinformationen austauschen müssen, um das Risiko von Fehlern zu reduzieren.

Inhaltsverzeichnis Haut