CSS-Kurs / display: block, inline, inline-block und Ausblenden

Die Eigenschaft display bestimmt, wie ein Element Boxen erzeugt und am Layout teilnimmt. Block, Inline und Inline-Block verhalten sich im normalen Fluss unterschiedlich; display: none entfernt die Box, während visibility: hidden deren Layoutraum beibehält.

Vergleichen Sie Block, Inline und Inline-Block

div·p wird normalerweise als Block angezeigt, und span·a wird normalerweise inline angezeigt. Wenn Sie einem Block keine separate Breite geben, füllt er normalerweise die verfügbare Breite seines übergeordneten Elements aus. Inline wird innerhalb einer Zeile wie Buchstaben in einem Satz platziert, wodurch lange Inhalte über mehrere Zeilen verteilt werden können. Ein Inline-Block wird als einzelne Box behandelt, die innerhalb einer Zeile platziert wird, sodass selbst wenn der Inhalt innerhalb der Box umgebrochen wird, die Box selbst nicht in mehrere Teile wie ein normaler Inline aufgeteilt wird.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

Das gesamte Beispiel gibt denselben drei Spans dieselben Größen- und Außenabstandsangaben und ändert nur display. block schreibt für jedes Element eine neue Zeile, während inline-block sie in derselben Zeile platziert, wenn Platz vorhanden ist. Die Breiten-·Höhen-Deklaration von inline macht die tatsächliche Boxgröße des normalen Textspans nicht zu dieser Zahl, auch wenn sie in der Stil-Liste bleibt. Überprüfen Sie die berechnete Deklaration und die tatsächlich verwendete Größe separat.

Verstehen Sie den Inline-Abstand und ersetzte Elemente

Bei normalem Inline-Layout beeinflussen linke und rechte Ränder sowie Padding den Abstand innerhalb der Zeile. Oberes und unteres Padding sowie Rahmen können gezeichnet werden, bestimmen jedoch nicht die Zeilenhöhe, indem sie umliegende Zeilen wie bei Block-Elementen nach unten drücken. Wenn Sie einem mehrzeiligen Text großes vertikales Padding geben, kann es überlappend erscheinen. Im gesamten Beispiel beobachten wir die Anzeige, indem wir etwas Spielraum in der Zeilenhöhe zulassen.

Wenden Sie „Inline-Elemente können nicht dimensioniert werden“ nicht auf jedes Element an. Ersetzte Elemente (replaced elements), etwa img, zeigen externe Inhalte an und können Breite und Höhe verwenden, auch wenn ihre Standardanzeige inline ist. Das blaue Rechteck im Beispiel ist 120 × 60px groß. Behandeln Sie es anders als ein gewöhnliches Textspan. Der MDN-Leitfaden zum Block- und Inline-Layout erklärt den zugrunde liegenden Fluss.

Vergleichen Sie display: none und visibility: hidden

DOM (Document Object Model) ist ein Modell, in dem Browser HTML-Dokumente als eine Elementstruktur behandeln. Ausblenden mit CSS unterscheidet sich vom Löschen eines HTML-Elements. Absätze mit display: none können auch in den Entwicklertools unter Elemente gefunden werden. In der gesamten Beispielreihe „front, target, back“ lässt hidden an der Zielposition einen leeren Platz, und none bedeutet, dass die dahinter stehenden Buchstaben nach vorne gebracht werden.

Das Ausblenden eines Elements kann den Tastaturzugriff und seine Verfügbarkeit für Hilfstechnologien sowie sein Erscheinungsbild verändern. Diese Übung vergleicht den Platz eines Kastens in einem statischen Dokument. Für echte Menüs und Bedienelemente sollte auch das Fokusmanagement überprüft werden und ob notwendige Informationen weiterhin verfügbar bleiben. Siehe MDN: display, MDN: visibility.

Inline-Block-Boxen im normalen Fluss ausrichten

Da inline-block Teil einer Textzeile ist, wird es standardmäßig an der Grundlinie der Zeile ausgerichtet. Wenn Sie leeren Raum unter einem Element sehen oder Elemente mit unterschiedlichen Höhen nicht ausgerichtet sind, prüfen Sie vertical-align und line-height gemeinsam. Selbst Leerzeichen oder Zeilenumbrüche zwischen Elementen im HTML können sichtbare Lücken bei der Inline-Platzierung verursachen.

Selbst wenn Sie das Aussehen mit display ändern, erhält ein span dadurch keine Überschriftenbedeutung und ein div keine Schaltflächenfunktion. Wählen Sie das HTML, das Ihrer Bedeutung entspricht, und setzen Sie dessen Platzierung. Wenn Sie die Ausrichtung, den Abstand und die Größe mehrerer Boxen zusammen verwalten müssen, sind die Regeln, die Sie später in Flexbox·Grid lernen, möglicherweise geeigneter. Sobald Sie den grundlegenden Ablauf verstehen, wird es einfacher zu bestimmen, wie sich die Anordnung ändert. Wie Elemente entlang einer Achse platziert werden, wird in einem vollständigen Beispiel in Flexbox-Grundlagen: Container, Elemente und Achsen behandelt. Wie man Reihen und Spalten zusammen gestaltet, wird mit einem vollständigen Beispiel in CSS Grid-Grundlagen: Tracks, Linien und Elementplatzierung behandelt.

Führen Sie das Beispiel aus und ändern Sie jeweils einen Wert.

Speichern Sie den untenstehenden Code als UTF-8 in display.html und öffnen Sie ihn. Die Bildbeispiele enthalten eingebettete SVG-Daten und benötigen keine separate Bilddatei. Vergleichen Sie drei Platzierungsmethoden und drei verborgene Zustände im selben Dokument.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. Überprüfen Sie in den Entwicklertools die Größe von Block- und Inline-Block-Elementen bis zu ihren Rändern. Sie beträgt 120×48px wegen der allgemeinen border-box-Regel. Inline-Elemente sind nicht auf eine Breite von 120px festgelegt, auch wenn sie dieselbe Breitenangabe haben.
2. Verkleinern Sie das Fenster, um zu sehen, ob das dritte Element im Inline-Block in die nächste Zeile umbricht. Jedes Block-Element beginnt auf einer neuen Zeile, selbst auf breiten Bildschirmen.
3. Deaktivieren Sie display: none in der Regel .none .target. Prüfen Sie, ob sich die Position der Buchstaben dahinter ändert, wenn das Ziel erscheint. Wenn Sie visibility: hidden der .hidden-Variante deaktivieren, erscheint das Objekt, aber der ursprünglich reservierte Platz bleibt erhalten.
4. Ändern Sie nur die Breite des Bildes auf 160px. Prüfen Sie, dass sich die Bildbox anders als ein gewöhnliches Inline-span verbreitert. Bei weiterhin 60px Höhe ändert sich ihr Seitenverhältnis. Stellen Sie danach 120px Breite wieder her.

Wenn die Platzierung anders als erwartet ist, überprüfen Sie den letztlich angewendeten display-Wert, die Platzierungsmethode des Elternteils, die Boxgröße und die Zeilenhöhe. Anstatt immer wieder unwirksame Größendeklarationen hinzuzufügen, ist es hilfreich, zunächst zwischen Elementtypen und Grundfluss zu unterscheiden.