CSS/Tutorials/Ausrichtung/display

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

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Was vielen nicht bewusst ist: HTML ist von Haus aus responsiv - Elemente wie Überschriften oder Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird. Erst eine starre Mehrspaltigkeit verhindert die passende Darstellung auf mobilen Geräten.

Mit CSS können Sie die Positionierung und Ausrichtung von Elementen genauer einstellen. Oft ist dies aber eine Verschlimmbesserung, da sich Elemente gegenseitig überlagern und so Inhalte verdecken!

Elementfluss[Bearbeiten]

Information: Elementfluss

Der normale Elementfluss (engl. flow) beschreibt das Verhalten von Elementen (genauer: von Boxen), die nicht positioniert oder gefloatet wurden.
Ohne weitere Festlegung nehmen Block-Elemente wie div, h1-h6 und p die gesamte Breite des Viewports ein und werden untereinander dargestellt.
Wenn eine Überschrift oder ein Textabsatz zu viel Inhalt für die verfügbare Bildschirmbreite hat, brechen sie um und erzeugen eine neue Zeile.

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]

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.

display[Bearbeiten]

Die display-Eigenschaft legt die Art der Box fest. Die wichtigsten Werte sind:

  • none: Das Element wird nicht dargestellt, ist im DOM aber noch zu sehen.
  • block: Das Element wird als Box dargestellt, die sich über dem gesamten verfügbaren Platz des Elternelements erstreckt.
    • Beispiele sind Überschriften (h1-h6) oder ein Absatz (p).
    • Nachfolgende Elemente folgen unterhalb.
  • inline: Das Element ist nur so breit wie der Inhalt und wird innerhalb einer Zeile angeordnet, kann sich aber auch über mehrere Zeilen erstrecken.
    • Beispiele für inline-Elemente sind Verweise (a) und Bilder (img).
    • Nachfolgende Elemente folgen auf der gleichen Zeile.
  • inline-block: erzeugt eine Box, die Eigenschaften von Inline- und Block-Boxen kombiniert.


Empfehlung:

Im Allgemeinen ist es nicht notwendig, die display-Eigenschaft zu setzen.

Verlassen Sie sich auf die Standard-Darstellung der Browser.

display: inline[Bearbeiten]

Elemente mit display: inline; erzeugen eine oder mehrere Inline-Boxen. Sie verlaufen auf einer Zeile horizontal in der Schreibrichtung der verwendeten Sprache. Im Deutschen also von links nach rechts, in hebräischen oder arabischen Texten von rechts nach links. Eine Inline-Box wird in mehrere Teile zerlegt, wenn sie nicht in einer Zeile Platz hat oder Zeilenumbrüche enthält.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Inline-Boxen können Innen- und Außenabstände sowie Rahmen besitzen. Vertikale Abstände und Rahmen besitzen jedoch keine Auswirkungen auf die Zeilenhöhe. Seitliche Abstände und Rahmen werden nur einmal, am Anfang und am Ende der ungeteilten Box, gezeichnet.

Die Breite von Inline-Boxen wird allein durch den Inhalt bestimmt. Die width-Eigenschaft ist wirkungslos. Die Teile einer aufgeteilten Inline-Box nehmen nur die Breite ein, die der Inhalt auch tatsächlich benötigt.

Die Höhe einer Inline-Box ist in der Regel von der verwendeten Schriftart abhängig, auch wenn die Inline-Box keine Inhalte besitzt. CSS definiert kein genaues Vorgehen für die Berechnung der Höhe. Die height-Eigenschaft ist wirkungslos. Die Höhe einer Inline-Box kann die Höhe einer Zeile (vergleiche die line-height-Eigenschaft) beeinflussen.

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.


display: block[Bearbeiten]

Block-Boxen nehmen die gesamte Breite des Elternelementes ein. Sie sind so hoch wie ihr Inhalt. Dadurch entsteht ein zusammenhängendes Rechteck, das aussieht wie eine Box und dieser Darstellungsart ihren Namen gibt.

Mehrere Block-Boxen werden untereinander angeordnet (normaler Elementfluss).

Beispiele für Blockelemente sind Absätze(p). Die Absätze dieses Artikels stehen alle untereinander und nehmen jeder für sich die gesamte Breite des Inhaltsbereiches ein.

Die Höhe eines Blockelementes wird von der Höhe des Inhaltes bestimmt: Hat ein Absatz viele Worte, wird das Element groß (hoch), enthält es gar nichts, ist die Höhe des Inhaltes gleich null.

Block-Boxen im Zusammenspiel mit ihrer Umgebung[Bearbeiten]

Auch leere Block-Boxen werden vom Browser dargestellt und sind oft anhand ihrer Abstände und Rahmen zu sehen. Eine Ausnahme bilden Blockelemente, die nur Außenabstände besitzen, denn die vertikalen Außenabstände von Block-Boxen können zusammenfallen.

Jedes Blockelement bildet eine Block-Formatierungs-Umgebung. Die erste Block-Formatierungs-Umgebung in HTML-Dokumenten wird vom Wurzeldokument (html-Element) erzeugt.

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

Sobald Sie eine Breite angeben, ersetzen Sie die automatische Breitenbestimmung (Breite des Elternelementes) durch den angegebenen Wert (z. B. 10em).

Beachten Sie, dass sich Breitenangaben auf den Inhalt des Elementes beziehen. Darum ist width: 100% (Inhalt ist so breit wie das Elternelement plus Innenabstand und Rahmen) nicht dasselbe wie width: auto (Element füllt inklusive Rahmen und Innenabstände den Inhaltsbereich des Elternelementes komplett aus).

Ein Blockelement mit einer Breitenangabe von 100% und einem Rahmen ragt optisch aus dem Elternelement heraus.

Ist eine Block-Box inklusive Innenabstand und Rahmen schmaler als das Elternelement, können Sie es im Elternelement horizontal zentrieren, indem Sie den Browser anweisen, links und rechts automatisch gleich breite Außenabstände hinzuzufügen. Geben Sie hierzu für margin-left und margin-right) den Wert auto an.

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 { 
      width: 100%; 
}
p:last-child { 
      width: 8em; 
      margin-left: auto; 
      margin-right: 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 nur 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.

Hinweis

Ein Element erzeugt selbst eine Block-Formatierungs-Umgebung, wenn der Wert seiner overflow-Eigenschaft nicht visible lautet. In diesem Zustand fallen die Außenabstände der Box nicht mit den Außenabständen der Kindelemente zusammen.

display: inline-block[Bearbeiten]

Manchmal kann es notwendig sein, inline-Elemente größer als die ursprüngliche Zeilenhöhe darzustellen. Ein solcher Anwendungsbereich findet sich in Navigationen, wo die Klickflächen der Links größer und einheitlich formatiert werden sollen.

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.

display: grid[Bearbeiten]

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 Layout wieder Block- und Inline-Elemente.

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

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


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

flex[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

flow-root[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Leer

Details: caniuse.com

list-item: Block-Box und Marker-Box (Listenpunkte)[Bearbeiten]

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

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.
Beachten Sie: 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[Bearbeiten]

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

  • Achtung
  • IE
  • CSS 3.0

Details: 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[Bearbeiten]

Ein Element mit display: none; erzeugt keine Box. Das Element ist unsichtbar und hat keinerlei Auswirkungen auf den Elementfluss.

Darüber hinaus werden Inhalte, die mit display: none; versteckt werden, auch von Vorlese-Software oder unterstützender Hardware wie einer Braille-Zeile ignoriert. 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.

Abgrenzung zur visibility-Eigenschaft[Bearbeiten]

Die Deklaration visibility: hidden; legt fest, dass die von einem Element erzeugte Box vollständig durchsichtig ist. Das Element behält dabei seine Auswirkungen auf nachfolgende Elemente bei. Elemente, für die display: none; festgelegt wurde, erzeugen dagegen gar keine Box. Diese Elemente besitzen keinerlei Einfluss auf nachfolgende Elemente im Elementfluss.

Gegenüberstellung von visibility: hidden und display: none; ansehen …
Im Beispiel wird ein Textabsatz wahlweise ausgeblendet (visibility: hidden;) oder nicht dargestellt. (display: none;)

Weitere Informationen finden Sie im Kapitel zur visibility-Eigenschaft.

inherit: Erben des Box-Typs[Bearbeiten]

  • CSS 2.0
  • IE 8

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[Bearbeiten]

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/Tutorials/Ausrichtung/display/Tabelle zu finden.

Siehe auch:

Zusammenwirkung von display, float und position[Bearbeiten]

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[Bearbeiten]

Quellen[Bearbeiten]

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