CSS display-Eigenschaft

Die Eigenschaft display ist eine der wichtigsten CSS-Eigenschaften zur Steuerung des Layouts. Sie definiert den Typ der Rendering-Box, die ein HTML-Element erzeugt — ob es in einer eigenen Zeile steht, inline mit Text fließt, ein Flex- oder Grid-Container wird oder vollständig verschwindet.

Dieses Kapitel behandelt, was jeder display-Wert bewirkt, den Unterschied zwischen der äußeren Darstellung (wie sich die Box gegenüber Geschwisterelementen verhält) und der inneren Darstellung (wie ihre Kinder angeordnet werden), die häufigsten Fallstricke sowie ausführbare Beispiele für jeden wichtigen Wert.

Warum die display-Eigenschaft wichtig ist

Jedes Element beginnt mit einem Standard-display-Wert, der durch das User-Agent-Stylesheet des Browsers bereitgestellt wird — <div> und <p> haben standardmäßig block, <span> und <a> haben standardmäßig inline, <li> hat standardmäßig list-item usw. Mit display kann dieser Standard überschrieben werden. So kann beispielsweise ein Block-Level-Element durch Setzen von display: inline inline dargestellt werden, und eine Liste von Links kann zu einer horizontalen Navigationsleiste gemacht werden.

Zwei weitere Anmerkungen zu Standardwerten:

• In HTML kommt der ursprüngliche display-Wert eines Elements aus der HTML-Spezifikation oder dem Browser-/User-Stylesheet — nicht aus dem display: inline-Schlüsselwort-Standard, den man in der CSS-Spezifikation sieht.
• In XML (das kein eingebautes Styling hat) hat tatsächlich jedes Element standardmäßig inline.

Älteres vs. modernes CSS: In älteren Spezifikationen hatten width und height keine Auswirkung auf inline-Elemente. Dieser Hinweis erscheint noch in vielen Tutorials, aber in der Praxis ignorieren Browser width/height bei einem einfachen inline-Element. Um ein Element zu dimensionieren und es dabei in der Zeile zu halten, sollte inline-block verwendet werden.

Box-Typen in CSS

In CSS gibt es mehrere Haupt-Box-Formate:

• Inline — Inline-Level-Boxen fließen innerhalb einer Textzeile und erzwingen keinen Zeilenumbruch. <span>, <em> und <img> sind standardmäßig inline. Eine Inline-Box akzeptiert Padding und Margins, aber vertikales Padding/Margin schiebt benachbarte Zeilen nicht auseinander, und width/height werden ignoriert. Um die Box zu dimensionieren und sie dabei in der Zeile zu halten, sollte inline-block verwendet werden. (Siehe Block- vs. Inline-Elemente.)
• Inline-block — Verhält sich wie eine Inline-Box (sie sitzt in der Zeile neben Text und anderen Inline-Inhalten), berücksichtigt aber tatsächlich width, height und vertikale Margins/Padding. Dies ist der Wert, der verwendet werden sollte, wenn man Box-ähnliche Dimensionierung ohne Zeilenumbruch möchte.
• Block — Block-Level-Boxen beginnen in einer neuen Zeile und strecken sich standardmäßig auf die verfügbare Breite ihres Containers. Sie können andere Block-Level-Boxen enthalten. <p>, <ul>, <h1>-<h6>, <div>, <section> und <ol> sind standardmäßig Block-Level.
• Flex — display: flex erzeugt einen Block-Level-Flex-Container und ordnet seine direkten Kinder entlang einer einzelnen Achse an. Siehe The Ultimate Guide to Flexbox.
• Grid — display: grid erzeugt einen Block-Level-Grid-Container und ordnet seine Kinder zweidimensional an (Zeilen und Spalten). Siehe die Eigenschaft grid.
• Table-Werte — Werte wie table, table-row und table-cell lassen Nicht-Tabellen-Elemente so verhalten wie die entsprechenden HTML-Tabellenelemente. inline-table verhält sich wie ein <table>, aber als Inline-Box; innerhalb der Tabellenbox wird ein Block-Level-Kontext hergestellt.

Äußere vs. innere Darstellung: Modernes CSS beschreibt display als zwei Teile. Der äußere Wert (block oder inline) steuert, wie die Box an dem Layout ihres übergeordneten Elements teilnimmt; der innere Wert (flow, flex, grid, table) steuert, wie die Box ihre eigenen Kinder anordnet. Deshalb macht flex ein Element gleichzeitig zu einer Block-Level-Box und zu einem Flex-Container.

Syntax

Syntax der CSS display-Eigenschaft

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Beispiel der display-Eigenschaft:

Beispiel der CSS display-Eigenschaft mit dem Wert inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Ergebnis

Wenn display: inline auf die Listenelemente angewendet wird, beginnt jedes Element nicht mehr in einer neuen Zeile — stattdessen stehen sie nebeneinander, nur durch den gesetzten margin-right getrennt.

Beispiel der display-Eigenschaft mit den Werten „inline" und „block":

Beispiel der CSS display-Eigenschaft mit den Werten inline und block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

Das erste Paar der <span>-Elemente bleibt in einer Zeile, da inline width und height ignoriert. Die .block-Spans hingegen nehmen jeweils eine vollständige Zeile ein und berücksichtigen die Breite von 300px und die Höhe von 30px.

Beispiel der display-Eigenschaft mit dem Wert „block":

Beispiel der CSS display-Eigenschaft mit dem Wert block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Beispiel der display-Eigenschaft mit dem Wert „contents":

Beispiel der CSS display-Eigenschaft mit dem Wert contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Mit display: contents erzeugt das .contents-Wrapper-Element keine eigene Box — sein Rahmen und Hintergrund würden ignoriert, und seine Kinder (der Text und die .hello-Box) verhalten sich so, als wären sie direkte Kinder von <body>.

Beispiel der display-Eigenschaft mit dem Wert „flex":

Beispiel der CSS display-Eigenschaft mit dem Wert flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Werte

display: none vs. visibility: hidden

Ein häufiger Punkt der Verwirrung: display: none entfernt das Element vollständig aus dem Dokumentfluss — es nimmt keinen Platz ein, als wäre es gelöscht worden. visibility: hidden blendet das Element aus, behält aber seine Box bei, sodass es weiterhin den Platz reserviert, den es eingenommen hätte. display: none sollte verwendet werden, um das Layout zu reduzieren, und visibility: hidden, um zu verbergen und dabei den Layout-Zwischenraum zu erhalten.

Verwandte Eigenschaften

• The Ultimate Guide to Flexbox — alles, was display: flex ermöglicht.
• grid — zweidimensionale Layouts mit display: grid erstellen.
• visibility — Elemente ausblenden, ohne sie aus dem Fluss zu entfernen.
• position und float — andere Möglichkeiten, die Platzierung von Boxen zu steuern.
• Block- und Inline-Elemente — die HTML-Standards, die display überschreibt.

Übung