Block- und Inline-Layout im normalen Fluss

Blockelemente im horizontalen Schreibmodus wie Englisch, werden vertikal angeordnet, eines unter dem anderen.

Im vertikalen Schreibmodus würden sie dann horizontal angeordnet.

In diesem Leitfaden werden wir auf Englisch arbeiten und daher ein horizontaler Schreibmodus. Allerdings sollte alles, was beschrieben wird, auf die gleiche Weise funktionieren, wenn Ihr Dokument im vertikalen Schreibmodus ist.

Wie in der Spezifikation definiert, sind es die Abstände zwischen zwei Block-Boxen, die die Trennung zwischen den Elementen erzeugen. Wir sehen dies bei einem sehr einfachen Layout von zwei Absätzen, denen ich einen Rahmen hinzugefügt habe. Das Standard-Styling des Browsers fügt durch Hinzufügen eines Abstands oben und unten zwischen den Absätzen einen Abstand hinzu.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
}

Wenn wir Abstände beim Absatz-Element auf 0 setzen, werden die Rahmen einander berühren.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 0;
}

Standardmäßig nutzen Blockelemente den gesamten Raum in der Inline-Richtung, sodass sich unsere Absätze ausbreiten und so groß wie möglich im umschließenden Block werden. Wenn wir ihnen eine Breite geben, werden sie weiter untereinander angeordnet, auch wenn Platz für sie wäre, um nebeneinander zu stehen. Jedes beginnt an der Startkante des umschließenden Blocks, also dem Punkt, an dem Sätze in diesem Schreibmodus beginnen würden.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  width: 40%;
}

Die Spezifikation erklärt, dass Abstände zwischen Blockelementen kollabieren. Das bedeutet, dass wenn Sie ein Element mit einem oberen Abstand unmittelbar nach einem Element mit einem unteren Abstand haben, anstatt dass der gesamte Abstand die Summe dieser beiden Abstände ist, der Abstand kollabiert und somit im Wesentlichen so groß wird wie der größere der beiden Abstände.

Im folgenden Beispiel haben die Absätze einen oberen Abstand von 20px und einen unteren Abstand von 40px. Die Größe des Abstands zwischen den Absätzen beträgt 40px, da der kleinere obere Abstand des zweiten Absatzes mit dem größeren unteren Abstand des ersten zusammengefallen ist.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 20px 0 40px 0;
}

Sie können mehr über den Margin-Kollaps in unserem Artikel Beherrschung des Margin-Kollapses lesen.

Inline-Elemente werden nacheinander in der Richtung angezeigt, in der Sätze in diesem speziellen Schreibmodus verlaufen. Während wir dazu neigen, nicht an Inline-Elemente als Boxen zu denken, haben sie in CSS, wie alles, eine Box. Diese Inline-Boxen werden nacheinander angeordnet. Wenn im umschließenden Block nicht genügend Platz für alle Boxen ist, kann eine Box in eine neue Zeile übergehen. Die erstellten Linien werden als Zeilenboxen bezeichnet.

Im folgenden Beispiel haben wir drei Inline-Boxen, die durch einen Absatz mit einem <strong>-Element darin erstellt wurden.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

Die Boxen um die Wörter vor dem <strong>-Element und nach dem </strong>-Element werden als anonyme Boxen bezeichnet, Boxen, die eingeführt wurden, um sicherzustellen, dass alles in einer Box eingeschlossen ist, aber solche, die wir nicht direkt ansprechen können.

Die Größe der Zeilenbox in der Blockrichtung (also die Höhe beim Arbeiten in Englisch) wird durch die höchste Box darin definiert. Im nächsten Beispiel hat das <strong>-Element 300%; da dieser Inhalt zwei Zeilen umspannt, definiert er nun die Höhe der Zeilenboxen dieser beiden Zeilen.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

strong {
  font-size: 300%;
}

Erfahren Sie mehr darüber, wie Block- und Inline-Boxen sich in unserem Leitfaden zum visuellen Formatierungsmodell verhalten.

Zusätzlich zu den in CSS2.1 vorhandenen Regeln beschreiben neue CSS-Ebenen weiter das Verhalten von Block- und Inline-Boxen. Die display-Eigenschaft definiert, wie eine Box und alle Boxen darin sich verhalten. Im CSS Display Model Level 3 können wir mehr darüber erfahren, wie die display-Eigenschaft das Verhalten von Boxen und der von ihnen erzeugten Boxen verändert.

Der Anzeigetyp eines Elements definiert den äußeren Anzeigetyp; dieser gibt vor, wie die Box neben anderen Elementen im selben Formatierungskontext angezeigt wird. Er definiert auch den inneren Anzeigetyp, der vorgibt, wie Boxen innerhalb dieses Elements sich verhalten. Wir können dies sehr klar erkennen, wenn wir ein Flexlayout betrachten. Im Beispiel unten habe ich ein <div>, dem ich display: flex gegeben habe. Der Flex-Container verhält sich wie ein Block-Element: Er wird in einer neuen Zeile angezeigt und nimmt den gesamten Raum ein, den er in der Inline-Richtung kann. Dies ist der äußere Anzeigetyp von block.

Die Flex-Items hingegen nehmen an einem Flex-Formatierungskontext teil, da ihr Elternteil das Element mit display: flex ist, das einen inneren Anzeigetyp von flex hat und den Flex-Formatierungskontext für die direkten Kinder festlegt.

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
  <div>
    <div>Children</div>
    <div>are in</div>
    <div>normal flow</div>
  </div>
</div>

.container {
  display: flex;
}

.container > * {
  border: 1px solid green;
}

Daher können Sie sich jedes Box-Element in CSS auf diese Weise vorstellen. Die Box selbst hat einen äußeren Anzeigetyp, sodass sie weiß, wie sie sich neben anderen Boxen verhält. Dann hat sie einen inneren Anzeigetyp, der ändert, wie ihre Kinder sich verhalten. Diese Kinder haben dann auch einen äußeren und inneren Anzeigetyp. Die Flex-Items im vorherigen Beispiel werden zu flex-level-Boxen, also wird ihr äußerer Anzeigetyp durch ihre Teilnahme am Flex-Formatierungskontext diktiert. Sie haben jedoch einen inneren Anzeigetyp von flow, was bedeutet, dass ihre Kinder am normalen Fluss teilnehmen. Elemente, die in unser Flex-Item verschachtelt sind, ordnen sich als Block- und Inline-Elemente an, solange nichts ihren Anzeigetyp ändert.

Dieses Konzept des äußeren und inneren Anzeigetyps ist wichtig, da es uns sagt, dass ein Container, der eine Layoutmethode wie Flexbox (display: flex) und Rasterlayout (display: grid) verwendet, weiterhin am Block- und Inline-Layout teilnimmt, da der äußere Anzeigetyp dieser Methoden block ist.

Browser zeigen Elemente in Block- oder Inline-Formatierungskontexten an, basierend darauf, was normalerweise für dieses Element sinnvoll ist. Beispielsweise wird ein <strong>-Element verwendet, um einen Textbereich stark hervorzuheben und wird standardmäßig in Browsern fett dargestellt. Es würde normalerweise keinen Sinn machen, dass dieses <strong>-Element als Block-Element angezeigt wird, das in eine neue Zeile umbricht. Wenn Sie jedoch möchten, dass alle <strong>-Elemente als Block-Boxen angezeigt werden, könnten Sie dies tun, indem Sie strong { display: block; } setzen. Die Möglichkeit, Inhalte mit CSS zu stylen, bedeutet, dass Sie immer die am besten geeigneten semantischen HTML-Elemente verwenden können, um Ihre Inhalte zu strukturieren, und dann ändern können, wie sie mit CSS dargestellt werden.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

strong {
  display: block;
}

In diesem Leitfaden haben wir uns angesehen, wie Elemente im normalen Fluss angezeigt werden, als Block- und Inline-Elemente. Aufgrund des Standardverhaltens dieser Elemente wird ein HTML-Dokument ganz ohne CSS-Styling auf eine lesbare Weise angezeigt. Wenn Sie verstehen, wie der normale Fluss funktioniert, wird Ihnen das Layout leichter fallen, da Sie den Ausgangspunkt für Änderungen daran verstehen, wie Elemente angezeigt werden.

• CSS Grundlegendes Box-Modell
• Normaler Fluss - Layout lernen
• Inline-Elemente
• Block-Elemente