<box-edge>

<visual-box> = content-box | padding-box | border-box /* the three <box> values */
<layout-box> = <visual-box> | margin-box /* the <shape-box> values */
<paint-box> = <visual-box> | fill-box | stroke-box
<coord-box> = <paint-box> | fill-box | stroke-box | view-box
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

Ein <box-edge> kann vom Typ <visual-box>, <layout-box>, <paint-box>, <coord-box> oder <geometry-box> sein.

<visual-box>

Bezieht sich auf das rechteckige Feld, das für ein Element generiert wird, wie es von einem Benutzer auf einer Webseite gesehen wird. Es umfasst den Inhalt, den Innenabstand und die Grenze des Elements. Auch als <box> bezeichnet, schließt dieser Wert den Randbereich aus. Dieser Werttyp wird für die Eigenschaften background-clip und overflow-clip-margin verwendet.

<layout-box>

Bezieht sich auf den vom Element belegten Raum, einschließlich Inhalt, Innenabstand, Grenze und Rand. Dieser Werttyp wird für Layout- und Positionierungszwecke verwendet. Auch als <shape-box> bezeichnet, wird dieser Werttyp für die Eigenschaft shape-outside verwendet.

<paint-box>

Bezieht sich auf den Bereich innerhalb der Layout-Box, der visuell den Inhalt darstellt. Dies umfasst den Bereich, in dem der Hintergrund und die Grenzen des Elements gemalt werden. Da der bemalbare Bereich eines Elements seine Ränder nicht einschließt, schließt dieser Wert margin-box aus.

<coord-box>

Bezieht sich auf die Koordinatenbox, die für die Positionierung und Dimensionierung eines Elements innerhalb seines übergeordneten Containers verwendet wird. Sie wird verwendet, um zu steuern, wie der Inhalt um die Ränder der Box fließt. Sie schließt den Randbereich aus. Dieser Werttyp wird für die Eigenschaft offset-path verwendet.

<geometry-box>

Definiert die Referenzbox für eine Grundform, oder wenn sie selbst spezifiziert ist, verursacht sie, dass die Kanten der spezifizierten Box, einschließlich jeder Eckenformung (wie ein border-radius), der Clipping-Pfad sind. Dieser Werttyp wird für die Eigenschaften clip-path, mask-clip, und mask-origin und das SVG-Attribut clip-path verwendet.

Die <box-edge> Schlüsselwörter sind wie folgt definiert:

content-box

Bezieht sich auf die Außenkante des Inhaltsbereichs der Box. Die Content-Box ist die innerste Box. Der Inhaltsbereich enthält den tatsächlichen Inhalt, wie Text, Bilder oder andere HTML-Elemente. In SVG wird dieser Wert als fill-box behandelt.

padding-box

Bezieht sich auf die Außenkante des Innenabstands der Box. Wenn auf einer Seite kein Innenabstand vorhanden ist, ist der Wert derselbe wie content-box. In SVG wird padding-box als fill-box behandelt. Der Innenabstandsbereich umgibt den Inhaltsbereich und beginnt an der Außenkante der Content-Box.

border-box

Bezieht sich auf die Außenkante der Grenze der Box. Wenn auf einer Seite keine Grenze vorhanden ist, ist der Wert derselbe wie padding-box. In SVG wird border-box als stroke-box behandelt. Der Grenzbereich umgibt den Innenabstandsbereich und beginnt an der Außenkante der Padding-Box.

margin-box

Bezieht sich auf die Außenkante des Randes der Box. Wenn auf einer Seite kein Rand vorhanden ist, ist der Wert derselbe wie border-box. In SVG wird margin-box als stroke-box behandelt.

fill-box

Bezieht sich auf die Objektbegrenzungsbox in SVG. In CSS wird fill-box als content-box behandelt. Es wird verwendet, um den Inhalt um die durch die coord-box Werte definierten Kanten herum zu umschließen.

stroke-box

Bezieht sich auf die Strichbegrenzungsbox in SVG. In CSS wird stroke-box als border-box behandelt. Es wird verwendet, um die Form des Elements zu definieren, wenn Striche angewendet werden.

view-box

Bezieht sich auf die Ursprungsbox des nächsten SVG-Viewport-Elements. Die Ursprungsbox ist ein Rechteck mit der Breite und Höhe des initialen SVG-Benutzerkoordinatensystems, das durch das viewBox Attribut für dieses Element festgelegt wird. Die Ursprungsbox ist so positioniert, dass ihre obere linke Ecke am Ursprung des Koordinatensystems verankert ist. In CSS wird view-box als border-box behandelt.

Hinweis: Wenn das SVG-Viewport nicht am Ursprung verankert ist, entspricht die Ursprungsbox nicht dem SVG-Viewport.

• CSS-Box-Modell Modul