Block-Größe | CSS-Tricks

CSS-Almanach → Eigenschaften → B → block-size

Joel Olawanle am 30. Aug 2021

block-size ist eine CSS-Logik-Eigenschaft, die die Höhe eines Elements definiert, wenn der writing-mode horizontal ist, oder die Breite des Elements, wenn der writing-mode vertikal ist.

.element {
  block-size: 700px;
  writing-mode: vertical-lr;
}

block-size ist in der Spezifikation von CSS Logical Properties and Values Level 1 definiert, die sich derzeit im Entwurfsstadium befindet (Editor's Draft).

Syntax

block-size: <'width'>;

Initial: auto
Gilt für: wie height und width
Vererbt: nein
Prozentsätze: wie für die entsprechende physische Eigenschaft
Berechneter Wert: wie height und width
Animationstyp: Nach berechnetem Werttyp wie Länge, calc() usw.

Werte

/* Length values */
block-size: 110px;
block-size: 2rem;

/* Percentage values */
block-size: 75%;

/* Keyword values */
block-size: auto;
block-size: fit-content(15em);
block-size: max-content;
block-size: min-content;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;
block-size: revert;

In den meisten Fällen werden Sie wahrscheinlich eine Zahl (z. B. 50px) für den Wert von block-size verwenden, aber es gibt einige Schlüsselwortwerte, die es wert sind, erwähnt zu werden

auto: Die Block-Größe des Elements entspricht der Größe seines Elternelements.
fit-content(): Eine Funktion, die es einem Container ermöglicht, bis zu einer gewünschten Größe zu wachsen und dann den Text umzubrechen, wodurch der Inhalt effektiv begrenzt wird. Sie kann auf Grid-Container angewendet werden, sowie auf die Box-Größenberechnung. Obwohl caniuse eine starke Unterstützung bei Verwendung mit dieser Eigenschaft zeigt, waren unsere Tests weniger schlüssig. Dies könnte daran liegen, dass das Modul Box Sizing Level 3 zum Zeitpunkt der Erstellung dieses Artikels noch im Entwurfsstadium (Editor's Draft) ist.
max-content: Die intrinsische *bevorzugte* Breite, was bedeutet, dass das Element den Text so weit wie möglich ausdehnt und die umschließende Box genau so breit macht wie der Text.
min-content: Die intrinsische *minimale* Breite, was bedeutet, dass die Box des Elements auf die minimale Größe ihres Inhalts reduziert wird. Mit anderen Worten, die umschließende Box ist so breit wie die größte Textzeichenfolge, die sie enthält.

Lassen Sie uns über Block vs. Inline sprechen

block-size ist verwandt mit inline-size, welches die entgegengesetzte Richtung definiert. Wenn wir von links nach rechts (LTR) als Schreibrichtung annehmen, können Sie sich block-size als das logische Äquivalent zu height und inline-size als das logische Äquivalent zu width vorstellen.

Eine andere Art, es zu betrachten: der Unterschied zwischen Block- und Inline-Elementen. Wenn wir von **Block-Level-Elementen** sprechen (z. B. <div>, <main>, <header>, <article> usw.), meinen wir Elemente, die den gesamten horizontalen Platz ihres Containers einnehmen. Wenn wir von **Inline-Level-Elementen** sprechen (<span>, <a>, <strong>, <em> usw.), meinen wir Elemente, die nur so breit sind wie der Inhalt, den sie enthalten. **Block-Elemente können nur vertikal wachsen**, da sie bereits die gesamte ihnen zur Verfügung stehende Breite einnehmen. Daher ist das Festlegen von block-size so, als würde man einem Element sagen, wie hoch es wachsen darf.

Umgekehrt definiert inline-size die Inline- oder horizontale Breite eines Elements.

Lassen Sie uns nun über Schreibmodi sprechen

Wir können keine Diskussion über eine logische Eigenschaft führen – einschließlich block-size –, ohne auf das grundlegende Konzept der Schreibmodi in CSS einzugehen.

Im (absolut) einfachsten Sinne ist der Schreibmodus die Richtung, in der Text innerhalb eines Elements oder des gesamten Dokuments fließt. Die Eigenschaft writing-mode wird verwendet, um die Richtung zu ändern, die vertikal oder horizontal und entweder von links nach rechts oder von rechts nach links eingestellt sein kann.

Werfen wir einen Blick auf ein einfaches Beispiel, nur um den Punkt zu verdeutlichen. Wenn ein horizontaler writing-mode eingestellt ist, erhöht block-size die *Höhe* des Elements.

Ebenso erhöht bei vertikalem Schreibmodus von Text die block-size die *Breite* des Containers.

Aber wenn wir height anstelle von block-size verwenden, behält der Absatz seine Höhe von 300px bei, aber in *horizontaler* Richtung, als ob wir stattdessen width deklariert hätten.

Siehst du das? block-size ist schlau! Es wechselt von Höhe zu Breite, abhängig vom Wert von writing-mode.

Jen Simmons hat einen Artikel und eine Präsentation, die tiefer auf CSS-Schreibmodi eingehen.

Das Deklarieren einer expliziten `width` oder `height` überschreibt `block-size`

Aber warte! Du fragst dich vielleicht, ob eine logische Eigenschaft wie block-size neben physikalischen Eigenschaften wie width und height funktioniert. Das tun sie... aber sei vorsichtig, denn

Das Deklarieren eines expliziten width- oder height-Wertes für das Element überschreibt den Wert der block-size-Eigenschaft.

Wenn wir zu unserem letzten Beispiel zurückkehren: Wenn ein Absatz-Element mit width 300 Pixel breit ist und der Schreibmodus auf vertical-lr eingestellt ist, dreht sich der Inhalt und ändert das Layout. Aber dieser Absatz bleibt 300 Pixel *breit* anstatt 300 Pixel *hoch*.

Ein klassisches Beispiel

.element {
  block-size: 300px
  width: 800px;
  writing-mode: vertical-lr;
}

Es ist natürlich anzunehmen, dass das Element in diesem Beispiel 300 Pixel breit ist, weil es in einem horizontalen Schreibmodus 300 Pixel ist. Aber es wird tatsächlich 800 Pixel breit, weil wir explizit width: 800px für das Element deklariert haben... und das überschreibt den block-size-Wert von 300 Pixeln nur im vertikalen Schreibmodus.

Das ist vielleicht genau das, was du möchtest! Aber wenn nicht, ist es eine gute Idee, auf das Deklarieren von width oder height zu verzichten, wenn du mit block-size (oder auch mit inline-size) arbeitest.