CSS/Tutorials/Ausrichtung/display

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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, sodass 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

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.

display

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

  • none: Das Element wird nicht dargestellt und belegt auch keinen Platz, ist im DOM aber noch vorhanden.
  • block: Das Element wird als Box dargestellt, die sich über dem gesamten verfügbaren Platz des Elternelements erstreckt (sofern nicht mit width gegengesteuert wird).
    • Beispiele sind Überschriften (h1-h6) oder ein Absatz (p).
    • Nachfolgende Elemente werden darunter angeordnet.
  • inline: Das Element ist so breit wie sein Inhalt und wird innerhalb einer Zeile angeordnet, kann sich aber auch über mehrere Zeilen erstrecken. Die CSS Eigenschaften width und height sind ohne Wirkung.
    • Beispiele für inline-Elemente sind Verweise (a) und Bilder (img).
    • Nachfolgende Elemente folgen auf der gleichen Zeile.
  • inline-block: erzeugt eine rechteckige Box, die zwar inline eingeordnet, aber deren Inhalt nicht umgebrochen wird. Ihr Flussverhalten ist mit dem eines img-Elements vergleichbar.
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: block

Block-Boxen nehmen die gesamte Breite ein, die ihnen zur Verfügung steht und 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 Block-Elemente sind Überschriften (h1-h6) und 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

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 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 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 standardmäßig auf den Inhaltbereich des Elementes beziehen. Das bedeutet, dass sich die tatsächliche Größe noch um die Innenabstände sowie Rahmenbreite erhöht. Darum ist die Angabe 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. Dieses Verhalten kann die Angabe von Boxgrößen sehr unpraktisch machen. Wenn Sie die CSS Eigenschaft box-sizing auf den Wert border-box setzen, können Sie die Berechnungsgrundlage verändern, so dass Rahmen und Innenabstand in der width-Angabe eingeschlossen sind.

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

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.


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: inline-block

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

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

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.


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.
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

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.

Abgrenzung zum hidden-Attribut

Ein Element mit dem Attribut hidden wird vom Browser ebenfalls nicht angezeigt. Die meisten Browser realisieren es so, dass im Browser-Stylesheet für alle Elemente mit diesem Attribut die Eigenschaft display:none gesetzt wird. Aus Präsentationssicht besteht deshalb zwischen hidden und display:none kein Unterschied.

Die Art, wie das hidden-Attribut implementiert ist, ist aber auch seine Schwäche. Chris Coyier zitierte in css-tricks.com Monica Dinculescu: (the [hidden]-rule is) less specific than a moderate sneeze.[4] Sobald in Ihrem Stylesheet für dieses Element eine display-Angabe erfolgt, wird das hidden-Attribut überschrieben.

Abgrenzung zur visibility-Eigenschaft

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.

Elemente ausblenden (Alternativen zu display: none)

Das Ausblenden der Untermenüs mit display: none; (und Einblenden mit display: block;) sollte man vermeiden, weil das die Inhalte für Benutzer von Screenreadern versteckt.

Eine Alternative ist es, die Untermenüs mit margin-left:-9999px; außerhalb des sichtbaren Bereichs zu verschieben und von dort wieder einfliegen zu lassen. Allerdings erzeugen die Browser dann ein zwar unsichtbares, aber riesengroßes Element, was die Performance der Seite negativ beeinflusst.

Ein anderer Weg könnte sein, das Untermenü mit text-indent unsichtbar zu machen:

text-indent blendet Element aus 
nav ul ul {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


Vorteil ist, dass der Text immer vom Element wegfließt und so auch bei langen Texten nie hereinragen kann und dass kein 9999px großer Container gezeichnet werden muss. Gerade auf mobilen Geräten ist die Performance deutlich besser.

Eine dritte Möglichkeit schiebt den Menüpunkt mit einem negativen z-index hinter die Seite. Damit er auch tatsächlich verschwindet, bekommt er noch eine Schriftgröße von Null.

font:0/0; und z-index blenden Element aus 
nav ul ul {
   font: 0/0 serif;   /* Unternavigation ausblenden */
   z-index: -1;
}

nav ul li:hover ul {
   font: inherit;     /*  Unternavigation einblenden */
   z-index: auto;   
  }


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

Quellen

  1. ↑ MDN: Normal Flow
  2. ↑ W3C: Visual formatting model - 9.3 Positioning schemes (CSS2.2)
  3. ↑ Wikipedia: Textmodus
  4. ↑ CSS Tricks: The 'hidden' Attribute is Visibly Weak
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Ausrichtung/display&oldid=99149“