CSS/Tutorials/Ausrichtung/display

Aus SELFHTML-Wiki
CSS‎ | Tutorials‎ | Ausrichtung(Weitergeleitet von Display:contents)
Wechseln zu: Navigation, Suche

Das Verständnis von display ist eine wichtige Grundlage für CSS-Layouts.

Die CSS-Eigenschaft display bestimmt, wie sich ein Element im Dokumentfluss verhält. Sie legt fest, ob ein Element als Blockelement, Inline-Element oder in einer anderen Darstellungsart angezeigt wird. Die modernen Layouttechniken Flexbox und Grid Layout werden ebenfalls über die CSS-Eigenschaft display aktiviert.

Dokumentfluss

Was vielen nicht bewusst ist: Eine HTML-Seite passt sich ohne zusätzliche CSS-Angaben bereits flexibel an unterschiedliche Bildschirmgrößen an.

Der normale Dokumentfluss (engl. flow) beschreibt das Verhalten von Elementen (genauer: von Boxen), die nicht positioniert oder gefloatet wurden.

Blockelemente wie Überschriften (h1-h6) oder Absätze (p) nutzen normalerweise die verfügbare Breite ihres Elternelements. Wird der Platz für den Text zu knapp, bricht der Browser ihn automatisch um und stellt ihn in weiteren Zeilen dar.

Inline-Elemente wie em, strong oder span werden dagegen wie Text behandelt, nebeneinander angeordnet und können auch auf eine neue Zeile umgebrochen werden, wenn der horizontale Platz nicht ausreicht. Sie benötigen nur den Platz, den ihr Inhalt benötigt.

Mit display können diese grundlegenden Eigenschaften verändert werden, beispielsweise um aus einem Inline-Element ein Blockelement oder umgekehrt zu machen. Probleme entstehen meist erst durch feste Breiten oder starre Mehrspalten-Layouts, die sich nicht an kleinere Bildschirme anpassen.

Bevor wir HTML mit CSS positionieren wollen, müssen wir uns erst mit dem normalen Elementfluss unformatierter HTML-Elemente beschäftigen. (CSS ergänzte HTML erst ab 1996!).[1]

CSS bietet drei Schemata, mit denen sich Boxen (rechteckige Elemente) in einem Webdokument beeinflussen lassen:[2]

Normaler Elementfluss ansehen …
<p>Ich bin ein Textabsatz auf der Blockebene. Benachbarte <b>Block-Elemente</b> sitzen auf neuen Linien unter mir.</p>
<p><b>Inline-Elemente</b> wie dieser <a href="#">Link</a> und dieses <span>span-Element</span>, genauso wie benachbarte Textknoten, sitzen auf derselben Zeile.  sofern Platz vorhanden ist.</p>

Ursprünglich hatten Computermonitore im Textmodus nur 80 Zeichen Breite[3]. Erst als größere Monitore mit höheren Bildauflösungen und der Fähigkeit Grafik darzustellen auf den Markt kamen, kam der Wunsch auf, Blockelemente auch nebeneinander positionieren zu können.

Blockachse und Inlineachse

In so genannten westlichen Schriften verläuft Text in einer Zeilen von links nach rechts und die Zeilen werden von oben nach unten gelesen. Aber das ist nur eine von vielen Möglichkeiten. Browser wurden in den USA entwickelt, mit westlicher Schrift, und viele Beschreibungen, die man findet, sind ganz selbstverständlich so formuliert, als wäre die westliche Schreibweise allgemeingültig.

Seit vielen Jahren werden Browser weltweit verwendet und HTML unterstützt alle Sprachen, die im Unicode-Standard behandelt werden. Für CSS müssen wir daher Formulierungen finden, die für alle Schreibsysteme gelten. Nun, zumindest für die drei, die als writing-mode unterstützt werden.

Die Inlineachse verläuft entlang der Textzeilen, in westlicher Schrift also horizontal. Ob die Richtung der Inlineachse von links nach rechts oder von rechts nach links verläuft, ist hier nachrangig, das wird durch die Schriftzeichen bestimmt. In chinesischer oder mongolischer Schrift ist die Inlinerichtung von oben nach unten, in japanischer Schrift ist beides möglich.

Die Blockachse verläuft quer zu den Textzeilen. Die Richtung auf der Blockachse ist in westlicher Schrift von oben nach unten. In chinesischer Schrift ist die Blockrichtung von rechts nach links, in mongolischer Schrift von links nach rechts.

Wenn also davon die Rede ist, dass Elemente in Inlinerichtung angeordnet werden, kann das von links nach rechts, von rechts nach links oder von oben nach unten sein, je nach Schriftsystem und Schriftzeichen. Anordnung in Blockrichtung kann vertikal von oben nach unten sein, horizontal von rechts nach links oder von links nach rechts.

display: Anzeigeart von Elementen verändern

Die display-Eigenschaft legt zwei Dinge fest: wie verhält sich eine Box, wenn sie normalem Elementfluss ausgesetzt ist („Außenverhalten“) und wie beeinflusst eine Box den Elementfluss ihrer Kindelemente („Innenverhalten“). Die wichtigsten Werte sind:

  • block: Das Element erzeugt eine Block-Box (z. B. h1, p, ul)
  • inline: Das Element erzeugt eine oder mehrere Inline-Boxen (je nachdem, auf wieviele Zeilen es verteilt werden muss) (z. B. span, strong,
  • inline-block: Das Element erzeugt genau eine Inline-Box. Sie ist so breit wie der Inhalt erfordert, aber höchstens so breit wie eine Block-Box.

Alle drei dieser display-Werte erzeugen Boxen, die ihre Kindelemente mit normalem Elementfluss anordnen.

Darüber hinaus gibt es weitere display-Werte, auf die im Anschluss noch eingegangen wird.

display: block

Block-Boxen werden vom normalen Elementfluss in Blockrichtung hintereinander angeordnet (im westlichen Schriftsystem also untereinander).

In Inlinerichtung füllen sie den verfügbaren Platz aus, den das Elternelement vorgibt, und in Blockrichtung sind sie so groß, wie ihr Inhalt es erfordert. Die Abmessungen können aber mit width und height bzw. inline-size und block-size beeinflusst werden.

Inline-Inhalt kann, wenn er nicht auf eine Zeile passt, auf mehrere Zeile umgebrochen werden.

Jedes Blockelement bildet eine neue Textfluss-Umgebung. Das ist nicht zu verwechseln mit einem Blockformatierungskontext; der Textfluss in einem Blockelement kann beispielsweise durch Float-Elemente, die es überlagern, beeinflusst werden. Ein Blockformatierungskontext entsteht nur unter bestimmten Umständen, er isoliert das zugeordnete Element gegen Beeinflussungen von und nach außen.

Mit der Angabe von display: block; können Sie den Browser anweisen, Elemente als Block-Boxen darzustellen, die standardmäßig keine Blockelemente sind.

Block-Boxen im Zusammenspiel mit ihrer Umgebung

Auch leere Block-Boxen werden vom Browser dargestellt und sind oft anhand ihrer Abstände und Rahmen zu sehen. Trotzdem kann es sein, dass nichts zu sehen ist: bei Blockelemente, die nur Außenabstände besitzen, können diese in Blockrichtung mit den Außenabständen benachbarter Boxen zusammenfallen.

Beachten Sie, dass sich Breitenangaben standardmäßig auf den Inhaltsbereich des Elementes beziehen. Das bedeutet, dass sich die tatsächliche Größe noch um die Innenabstände sowie Rahmenbreite erhöht. Darum führt die Angabe width: 100% zusammen mit Rändern und Innenabständen zu einer zu großen Breite. Die Default-Einstellung width: auto berücksichtigt Ränder und Innenabstände hingegen.

Um das zu lösen, können Sie sich mit Calc() abmühen. Besser ist es aber, die Eigenschaft box-sizing von ihrem Standardwert content-box auf den Wert border-box umzustellen und damit den Browser anzuweisen, für Größenangaben die Außenkante der Ränder zu benutzen. So, wie es der Internet-Explorer vor Jahrzehnten tat, sich damit aber nicht durchgesetzt hat.

Ist eine Block-Box inklusive Innenabstand und Rahmen in Inlinerichtung kleiner als das Elternelement (westliche Schrift: schmaler), können Sie es im Elternelement zentrieren, indem Sie den Browser anweisen, auf beiden Seiten automatisch gleich breite Außenabstände hinzuzufügen. Für westliche Schriften könnten Sie das tun, indem Sie die Eigenschaften margin-left und margin-right auf den Wert auto setzen. Seit 2021 ist es aber praktischer, die Eigenschaft margin-inline zu verwenden. Natürlich nimmt man dann auch inline-size statt width.

Beispiele für das Verhalten von Block-Boxen im normalen Elementfluss ansehen …
p { 
      margin: 1em; 
      border: medium solid blue; 
      padding: 0.5em; 
}
p:first-child { 
      inline-size: 100%; 
}
p:last-child { 
      inline-size: 8em;
      margin-inline: auto; 
}

In diesem Beispiel erzeugen (unter anderem) die Elemente h1, div und p Block-Boxen. In HTML besitzen diese Elemente display: block; als Standarddefinition.

Da für den ersten Absatz eine Breite von 100% festgelegt wurde, ragt das Element (mit blauem Rahmen) aus seinem Elternelement (grün gestrichelter Rahmen) heraus, denn zur Breite - die exakt so breit ist, wie das Elternelement - werden noch seitliche Innen- und Außenabstände sowie die Rahmenbreite hinzuaddiert.

Der zweite Absatz besitzt keine Breite, daher passt sich das Element an die im Elternelement verfügbare Breite an.

Das dritte Element besitzt eine geringere Breite als das Elternelement, daher ist es möglich, die seitlichen Außenabstände automatisch berechnen zu lassen. Dies führt zur zentrierten Positionierung des Blockelements.

Beachten Sie auch, dass die vertikalen Abstände zwischen den Absatzelementen zusammenfallen.

display: inline

Inline-Boxen werden vom normalen Elementfluss in Inlinerichtung hintereinander angeordnet (im westlicher Schriftsystem also nebeneinander von links nach rechts). Aus einem Inline-Element können mehrere Inline-Boxen entstehen, wenn auf einer Zeile nicht mehr genug Platz ist. Die weiteren Inline-Boxen werden in Blockrichtung auf neue Zeilen gesetzt. Verändert sich der verfügbare Platz, so dass ein neuer Zeilenumbruch nötig wird, werden die Inline-Boxen neu gebildet.

Werden Inline-Elemente ineinander geschachtelt, kann es vorkommen, dass die Inline-Boxen des inneren Elements auf mehrere Inline-Boxen des äußeren Elements verteilt werden. Für den Betrachter wirkt das so, als würden die geschachtelten Inline-Elemente gemeinsam auf die Zeilen umgebrochen.

Horizontal können Inline-Boxen mit der Eigenschaft text-align ausgerichtet werden. Befinden sich verschiedenhohe Inline-Boxen auf einer Zeile, kann die vertikale Ausrichtung der Boxen zueinander mit Hilfe der Eigenschaft vertical-align festgelegt werden.

Beispiel ansehen …
    #beispiel1 { width: 11em; line-height: 2; }
    #beispiel1 span { margin: 1em; border: 2px solid green; }

    #beispiel2 code { font-size: 1.5em; line-height: 3em; vertical-align: top; }

In diesem Beispiel erzeugen die Elemente code und span Inline-Boxen.

Das erste Beispiel zeigt eine Inline-Box, die auf mehrere Zeilen aufgeteilt wird. Die Breite der einzelnen Boxen richtet sich nach dem Inhalt. Die seitlichen Abstände und Rahmen werden nur am Anfang der ersten Box bzw. am Ende der letzten Box dargestellt. Ohne die Festlegung einer line-height würden sich die Rahmen ober- und unterhalb der Box überlappen.

Im zweiten Beispiel befinden sich Inline-Boxen unterschiedlicher Größe auf einer Zeile. Mit Hilfe der Eigenschaft vertical-align werden die Boxen an ihrer Oberkante auf der Zeile ausgerichtet.

Beachten Sie: Wegen der möglichen Verteilung eines Elements auf mehrere Boxen werden Eigenschaften, die die Größe verändern oder die das Element transformieren, von display:inline-Elementen ignoriert. Höhe und Breite hängen nur vom Inhalt, der eingestellten Schrift und eventuell dem Wert von line-height ab.

Andere Eigenschaften wie padding oder border sind möglich und werden auf alle gebildeten Inline-Boxen angewendet. Sie ändern aber die Zeilenhöhe nicht. Für Rahmen und Abstände in Inlinerichtung gilt außerdem, dass sie nur einmal erzeugt werden: am Beginn er ersten Inline-Box und am Ende der letzten Inline-Box.

Ausnahme: manche Elemente haben vom Browser aus display: inline, werden bei der Darstellung aber durch anderen Inhalt ersetzt. Das gilt beispielsweise für Bilder (img), Videos oder iframe-Elemente. Ein ersetztes Element bildet immer nur eine einzige Inline-Box und akzeptiert deshalb auch CSS-Eigenschaften für Größe und Transformation.

Empfehlung: Das explizite Setzen von inline oder block ist im Allgemeinen nicht notwendig. Verlassen Sie sich auf die Standard-Darstellung der Browser.
Wenn Sie glauben, es dennoch tun zu müssen, fragen Sie sich besser zunächst, ob Sie das richtige Element benutzen.

display: inline-block

Ein Element mit display: inline-block bildet genau eine rechteckige Inline-Box. Sie ist so breit wie der Inhalt, aber maximal so breit, wie eine Block-Box an dieser Stelle wäre. Ist ihr Inhalt in Inlinerichtung zu groß, wird innerhalb der Inline-Box auf mehrere Zeilen umgebrochen.

Da es in diesem Displaymodus nur eine Inline-Box gibt, sind Eigenschaften für Größe und Transformation anwendbar, so dass inline-block Elemente eine Möglichkeit sind, die Einträge in einer Navigationsleiste zu bilden. Diese muss man gegebenenfalls auf eine feste Höhe festlegen, aber trotzdem nebeneinander haben.

Navigation: Links innerhalb einer Liste ansehen …
<nav>
  <ul>
    <li><a href="#link_1.html">Wiki</a></li>
    <li><a href="#link_2.html">Blog</a></li>
    <li><a href="#link_3.html">Forum</a></li>
  </ul>
</nav>

Die Links sind inline-Elemente innerhalb der Blockelemente li. Eine Festlegung von Außen- oder Innenabständen wirkt sich in Schreibrichtung aus, nicht jedoch auf die Zeilenhöhe!

Navigation: display:inline und display:inline-block ansehen …
li {
  background: #dfac20;
  display: inline;
  padding: 0;	
  margin: 1em;	
}

a {
  display: inline-block;	
  border: 1px solid;
  background: #306f91;
  color: #e6f2f7;
  padding: .5em;	
  margin: .5em;		
}

Die Blockelemente li werden mit display:inline innerhalb einer Zeile angeordnet. (Falls die Zeilenbreite nicht ausreicht, bricht die Navigation um.)

Die Links a sind mit display: inline-block nun nach außen innerhalb einer Zeile angeordnet, nach innen aber Blockelemente. So können Sie ihnen eine feste Breite geben.

Beachten Sie, dass ein Außenabstand margin des a-Elements das darunterliegende li sichtbar macht. Wenn Sie die Linkflächen weiter auseinanderrücken wollen, müssen Sie Abstände bei den li-Elementen festlegen.

ToDo (weitere ToDos)

Beipiel und Argumentation sind veraltet. Heute würde man eine Flexbox verwenden und das Thema damit obsolet machen
.

Schauen wir uns noch kurz die weiteren Werte für display an.

display: contents

Browserunterstützung
caniuse.com

Das Element wird selbst nicht dargestellt und so behandelt, als befände sich sein Inhalt an seiner Stelle. Ein Styling mit CSS ist nicht möglich. Wenn das Element Teil eines Flex- oder Grid-Containers ist, werden seine Kind-Elemente zu den Flex- bzw. Grid-Items.

display: flex

Die Werte

  • display: flex;
  • display: inline-flex;

aktivieren das Flexible Box Layout Module, um responsive und flexible Layouts ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear zu erstellen. Alle direkten Kind-Elemente werden zu flexible Items.

  • Einstieg in Flexbox
    • Warum Flexbox?
    • Responsives Mehrspaltenlayout
     

display: grid

In modernen Code-Beispielen findet man oft Werte wie display: flex oder grid. Mit diesen Werten wird das Visual Formatting Model durch flexible und responsive Flexbox-, bzw. Grid Layout-Modelle ersetzt, die die Webseite browserseitig aufteilen.

Da sich die display-Eigenschaft nicht auf die Kindelemente vererbt, sind die Elemente innerhalb des Grid Layouts wieder Block- und Inline-Elemente.

Zeitgemäßes Nebeneinander im Grid Layout ansehen …
body { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}

Dieses Beispiel greift den folgenden Kapiteln vor und wird in einem eigenen Kurs vorgestellt:

  • Einstieg in Grid Layout
    • Responsive Raster ohne Media Queries
    • Ausrichtung von Grid-Items
     
Hinweis:
Die folgenden Werte für display wurden eingeführt, um die Positionierung gegenüber dem Floaten von Elementen zu erleichtern. Sie sind heute eher unüblich.
Verwenden Sie für das Layouten von Elementen und Seiten display: flex und display: grid

flow-root

Der Wert flow-root lässt Blockelemente im normalen Elementfluss. Der Inhalt der Boxen richtet sich an der Größe der Kindelemente aus, sodass der Einsatz des Clearfix-Hack nicht mehr nötig ist.

Browserunterstützung
caniuse.com

list-item: Block-Box und Marker-Box (Listenpunkte)

Elemente mit display: list-item; erzeugen zwei Boxen: eine Hauptbox, die sich identisch zu einer Block-Box verhält, sowie eine Marker-Box, in die das Aufzählungszeichen eingefügt wird. Die Einheit aus beiden Boxen wird als „Listenpunkt“ oder „Listenelement“ bezeichnet.

Die Position der Marker-Box ist in Abhängigkeit von der direction-Eigenschaft immer in der linken (direction: ltr;) bzw. rechten (direction: rtl;) oberen Ecke der Block-Box und befindet sich auf gleicher Höhe wie die erste Zeile in der Hauptbox. Ob sich das Aufzählungszeichen inner- oder außerhalb der Block-Box befindet, wird mit der Eigenschaft list-style-position festgelegt.

Marker-Boxen besitzen keine Hintergründe, sie sind immer durchsichtig.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiele für das Verhalten von Elementen 
    mit display: list-item;</title>
    <style>
    p { display: list-item; margin-left: 2em;
     border: 1px solid green; padding: .2em; }
    .allgemeines { list-style-position: inside; }
    </style>
  </head>
  <body>
    <h1>Beispiele für das Verhalten von Elementen 
    mit <code>display: list-item;</code></h1>
    <p class="allgemeines">Ein Element mit innenstehendem Aufzählungszeichen.</p>
    <p>Ein Element mit außenstehendem Aufzählungszeichen.</p>
  </body>
</html>

Dieses Beispiel zeigt zwei Varianten für Elemente mit display: list-item;. Im ersten Beispiel befindet sich das Aufzählungszeichen (die Marker-Box) innerhalb des Absatzes, im zweiten Beispiel außerhalb davon.

Die Außenabstände der Block-Boxen fallen zusammen.


Wenn das Aufzählungszeichen außerhalb der Block-Box dargestellt wird, sollte an der Seite etwas Freiraum zur Verfügung stehen. Entweder wird der Block-Box seitlich ein Außenabstand zugewiesen oder dem Elternelement ein seitlicher Innenabstand (so wird es in HTML für geordnete und ungeordnete Listen gehandhabt).

Beachten Sie: Derzeit (Stand März 2012) unterstützt Mozilla Firefox nur Symbole als Aufzählungszeichen, wenn sich der Listenpunkt nicht innerhalb eines HTML-ul-, -ol- oder -menu-Elements befindet.
Beachte: Die Marker-Box wird unsichtbar, wenn sie sich außerhalb der Block-Box befindet und die Block-Box einen anderen Wert als visible für die overflow-Eigenschaft annimmt. Dies ist CSS-2.1-konform und derzeit (Stand März 2012) in allen Browsern so umgesetzt. Die CSS-Arbeitsgruppe plant jedoch, die Anzeige der Marker-Box in dieser Situation künftig zu erlauben, da dies eher dem Autorenwunsch entspricht.

run-in

Achtung.svg

Elemente mit display: run-in; erzeugen eine Run-In-Box. Eine Run-In-Box wird kontextabhängig als Inline- oder als Block-Box verarbeitet.

Browserunterstützung
caniuse.com

Achtung!

Run-In-Boxen wurden in CSS 2 definiert. Diese Definition wurde dann in CSS 2.1 übernommen und überarbeitet. Aufgrund mangelnden Interesses der Browserhersteller am Run-In-Verhalten wurde dessen Definition aus CSS 2.1 gestrichen. In der CSS 3-Spezifikation ist das Run-In-Verhalten bisher nur in Arbeitsentwürfen festgelegt.

none

Ein Element mit display: none; erzeugt keine Box und ist vom Layout-Prozess ausgenommen. Damit ist es unsichtbar und hat keinerlei Auswirkungen auf den Elementfluss.

Assistenztechniken wie Vorlese-Software oder Braille-Zeilen beachten es ebenfalls nicht. Elemente, deren Inhalt zugänglich, aber nicht sichtbar dargestellt werden soll, müssen stattdessen mit anderen Methoden, etwa durch Verschieben aus dem sichtbaren Bereich, versteckt werden.

→ Sichtbarkeit von Elementen
Wie blende ich Elemente so aus, dass sie für Screenreader trotzdem sichtbar sind?

  • Sichtbarkeit von Elementen

    hidden oder display: none?
    visibility und opacity

     

inherit: Erben des Box-Typs

Ein Element mit display: inherit; erbt den Wert der display-Eigenschaft des Elternelements. Das Element erzeugt dann dieselbe Art von Box wie das Elternelement.

table-*: Darstellung in Tabellenform

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Sie sind auf einer eigenen Seite unter CSS/Eigenschaften/display: table zu finden.

Siehe auch:

Zusammenwirkung von display, float und position

Die drei Eigenschaften display, float und position, die den Elementfluss und die Erzeugung von Boxen bestimmen, sind nicht vollständig miteinander vereinbar. Daher gelten folgende Regeln für das Zusammenwirken der Eigenschaften:

  • Ist für display der Wert none festgelegt, werden float und position nicht angewendet. Es wird keine Box erzeugt.
  • Anderenfalls: Wenn position den Wert absolute oder den Wert fixed besitzt, gilt das Element als absolut positioniert. Die Position wird anhand der Eigenschaften top, left, right und bottom, sowie anhand der beinhaltenden Box ermittelt. Die Box wird dann nicht gefloatet. Der berechnete Wert der Eigenschaft float entspricht none. Der berechnete Wert der display-Eigenschaft wird der nachfolgenden Tabelle entnommen.
  • Anderenfalls: Ist für die float-Eigenschaft nicht der Wert none festgelegt, gilt das Element als gefloatet. Der berechnete Wert der display-Eigenschaft wird der nachfolgenden Tabelle entnommen.
  • Anderenfalls: Wenn es sich um das Wurzelelement handelt, wird der berechnete Wert der display-Eigenschaft der nachfolgenden Tabelle entnommen. Jedoch ist derzeit (in CSS 2.1; Stand März 2012) nicht definiert, ob der festgelegte Wert list-item beibehalten oder in den berechneten Wert block umgewandelt wird.
Verhältnis von festgelegtem zu berechnetem Wert
Festgelegter Wert Berechneter Wert
inline, inline-block, run-in, table-caption, table-column-group, table-column, table-header-group, table-row-group, table-footer-group, table-row, table-cell block
inline-table table
andere wie festgelegt
Beachten Sie: Derzeit (Stand März 2012) berechnet nur Mozilla Firefox den Wert der display-Eigenschaft als block, wenn display: list-item; für das Wurzelelement festgelegt wurde.

Weblinks

  1. ↑ MDN: Normal Flow
  2. ↑ W3C: Visual formatting model - 9.3 Positioning schemes (CSS2.2)
  3. ↑ Wikipedia: Textmodus

Abgerufen am 22.07.2026
von "http://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display"