PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: display, Kategorien: Bildschirm­darstellung (allgemein), Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3), Generated and Replaced Content (CSS 3)

Anzeige bzw. Art der Darstellung

Verleiht einem HTML-Element das eigentliche Aussehen als Inline- oder Block-Element, blendet es per "hidden" aus u. w..

CSS-Eigenschaft: display
KurzbeschreibungWerteStandardwertKategorieHinweis
Anzeige bzw. Art der Darstellung
  • <template>(CSS 3)
  • inline
  • block
  • inline-block
  • list-item
  • run-in(CSS 3)
  • compact (CSS 3)
  • table
  • inline-table
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-column-group
  • table-column
  • table-cell
  • table-caption
  • ruby(CSS 3)
  • ruby-base(CSS 3)
  • ruby-text(CSS 3)
  • ruby-base-group(CSS 3)
  • ruby-text-group(CSS 3)
  • none
  • flex(CSS 3)
  • inline-flex(CSS 3)
inline
Allgemein:
Bildschirm­darstellung
Positionierung
CSS 2.1:
Visual formatting model
CSS 3:
Basic Box Model
Flexible Box Layout
Generated and Replaced Content
 

Verwandte Eigenschaften aus der Kategorie: Bildschirm­darstellung (allgemein), Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3), Generated and Replaced Content (CSS 3):

Folgendes ist beim Einsatz von display zu beachten:

  • Über display wird einem HTML-Element die Eigenschaft als Block- oder Inline-Element zugewiesen. Weitere Darstellungsweisen wie Listen- oder Tabellenverhalten sind ebenfalls über display steuerbar.
  • Die Unterscheidung von Block-Elementen wie <div>, <p>, <h1>, <h2> usw. und Inline-Elementen wie <strong>, <em>, <span> etc. gehört zu den elementaren Dingen von HTML bzw. CSS:
    • Block-Elemente nehmen 100% der verfügbaren Breite ein. Jedes Block-Element beginnt in einer neuen Zeile. Abstände (margin, padding), Höhen und Breiten greifen auf Block-Elemente.
    • Inline-Elemente reihen sich aneinander, wie Buchstabe an Buchstabe, wie Worte an Worte. Wenn eine Zeile voll ist, bricht das nächste Wort in die nächste Zeile um. Abstände, Höhen und Breiten greifen an Inline-Elementen nicht bzw. nur bedingt.
    • Die wichtigsten Werte von display sind deswegen display: inline und display: block.
  • Ein weiterer und für die Praxis wichtiger Wert ist display: none. Darüber wird ein Element ausgeblendet. Im Gegensatz zur CSS-Eigenschaft visibility: hidden ist das HTML-Element bei einem display: none nicht im DOM zu finden, nimmt im Elementfluss keine Breite und Höhe ein, d. h., es wird kein Platz für das Element reserviert. visibility: hidden hingegen räumt dem HTML-Element Platz ein, man findet es im DOM, es wird lediglich nicht angezeigt.
  • Über display: none ausgeblendete Elemente können über jeden anderen Wert wieder eingeblendet werden, sowohl über inline als auch über block.
  • display: none blendet Elemente auch für Screenreader aus.
  • Der Wert inline-block steuert, dass sich HTML-Elemente im Elementfluss wie Inline-Elemente verhalten, sie werden also wie Wort an Wort hinter einander ausgespielt. Allerdings greifen Abstände wie padding und margin wie bei Block-Elementen. Die Abstände greifen innerhalb des umgebenen Elements.
  • Weitere Werte stellen HTML-Elemente als Listen bzw. Tabellen dar. Beide Varianten sind in der Praxis so gut wie nicht zu finden. Der wesentliche Grund dafür ist, dass diese Tabellen- bzw. Listendarstellungen erst in aktuellen Browsern dem Standard entsprechend dargestellt werden. Aufgrund mangelnder Browserunterstützung sind sie im Grunde bis heute aber nicht brauchbar. Generell sei an dieser Stelle angemerkt, dass Listen und Tabellen auch als solche im HTML ausgezeichnet werden sollten. Die konkreten Anwendungsfälle wird die Zukunft bringen.
  • Der CSS3 Standard sieht weitere Werte für display vor. Allerdings ist der Standard noch so sehr in Bewegung, dass hier noch nicht jeder Wert beschrieben ist. Beim ersten Entwurf dieser Beschreibung, im Sommer 2011, waren noch Werte zu finden, die derweil nicht mehr im Entwurf des Standards auftauchen, neue Werte sind jetzt im Oktober 2011 hinzugekommen. Sobald die Werte relevant werden, wird hier eine entsprechende Beschreibung folgen.
Browserunterstützung von display
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu display:



Beispiele

HTML:

<div class="css21">
   <span>Ein Inline-Element</span>
   <hr>
   <span class="doBlock">Ein Inline-Element als Block-Element dargestellt.</span>
</div>

CSS:

div.css21 {
   border: 1px solid #000;
   min-height: 50px;
}
span  {
   border: 5px solid red;
   background-color: yellow;
   padding: 10px;
}
.doBlock {
   display: block;
}
/* Über ein display: block wird ein Inline-Element als Block-Element dargestellt.
Das Inline-Element überlagert mit Rahmen und dem Padding die Grenzen des umgebenen DIV */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Ein Inline-Element
Ein Inline-Element als Block-Element dargestellt.
 

HTML:

<div class="css21">
   <p>block element</p>
   <p class="doInline">display: inline / block element</p>
</div>

CSS:

p  {
   border: 5px solid blue;
   background-color: pink;
   padding: 10px;
}
.doInline {
   display: inline;
}
/* Über display: inline werden Block-Elemente als Inline-Elemente dargestellt. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

block element

display: inline / block element

 

HTML:

<div class="css21 doDisNo">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
</div>

CSS:

div.doDisNo {
   height: 200px;
}
div.css21 div {
   width: 75px;
   height: 75px;
   float: left;
   margin: 5px;
   border: 5px solid #c0c0c0;
}
div.css21 div.doRed {
   background-color: red;
}
div.css21 div.doBlue {
   background-color: blue;
}
div.css21 div.doYellow {
   background-color: yellow;
}
div.css21 div.doGreen {
   background-color: green;
}
div.doDisNo div.doRed {
   display: none;
}
/* display: none führt dazu, dass Elemente komplett aus dem Elementfluss verschwinden, folgende HTML-Elementen "rutschen" auf. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

 

HTML:

<div class="css21 doNo">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
</div>

CSS:

div.doNo {
   height: 200px;
}
div.doNo div.doRed {
   visibility: hidden;
}
/* Im Gegensatz zu display: none blendet visibility: hidden das HTML-Element nur aus, der reservierte Platz bleibt allerdings erhalten. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

 

HTML:

<div class="css21">
   <span class="doList">ein SPAN</span>
   <strong class="doList">ein STRONG</strong>
   <p class="doList">ein P-Tag</p>
   <em class="doList">ein EM</em>
</div>

CSS:

div .doList {
   display: list-item;
}
/* Über display: list-item wird HTML-Elementen das Aussehen einer Liste zugewiesen.
Generell sollten Listen jedoch als Listen im HTML gesetzt werden, falls es sich um Listen im Sinne der HTML-Semantik handelt.  */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

ein SPAN ein STRONG

ein P-Tag

ein EM
 

HTML:

<div class="css21">
   <p class="doP">
      <strong>111</strong>
      <strong>222</strong>
      <strong>333</strong>
      <strong>444</strong>
      <strong>555</strong>
      <strong>666</strong>
   </p>
   <hr>
   <p class="doP">
      <strong class="doInlineBlock">111</strong>
      <strong class="doInlineBlock">222</strong>
      <strong class="doInlineBlock">333</strong>
      <strong class="doInlineBlock">444</strong>
      <strong class="doInlineBlock">555</strong>
      <strong class="doInlineBlock">666</strong>
   </p>
</div>

CSS:

p.doP {
   border: 2px solid #8000FF;
   background-color: #CF9EFF;
   margin: 5px;
}
strong {
   border: 2px solid red;
   background-color: #FFD6D6;
   padding: 15px;
   margin: 5px;
}
strong.doInlineBlock {
   display: inline-block;
}
/* Die Eigenschaft display: inline-block steuert, dass die Elemente zwar ganz normal hinter einander laufen, aber Außen- und Innenabstände einnehmen. Der erste Block zeigt, das Inline-Elemente Abstände nicht erwartungsgemäß darstellen, es kommt zu Überlagerungen. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

111 222 333 444 555 666

111 222 333 444 555 666

 

HTML:

<div id="example-1" class="css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-1 {
    display: -webkit-flex;
    display: flex;
}
/* Über display: flex (bzw. die Schreibweise mit Vendor-Präfix -webkit-) wird dem äußeren DIV die Flexbox-Eigenschaften zugewiesen. 
Inhalte werden dann gleichmäßig und automatisch in Höhe und Breite auf das DIV verteilt. */

/* Anmerkung: Für alle folgenden Beispiele wird ein Rahmen für die Flexbox sowie für alle darin liegenden Element definiert. Abstände sorgen für etwas mehr Übersichtlichkeit. Jedes einzelne Element erhält zusätzlich eine individuelle Hintergrund­farbe. Diese allgemeinen Regeln wirken auf alle folgende Beispiele. */
div.css3 {
    border: 2px solid #999;
}
div.css3 div {
    border: 2px solid #333;
    margin: 5px;
    padding: 5px;
}
.box-1 {
    background-color: #99ff00;
}
.box-2 {
    background-color: #ffff00;
}
.box-3 {
    background-color: #ff9900;
}
.box-4 {
    background-color: #ff0000;
}
Beispiel nur für: Google ChromeOpera

Beispiel Nr. 7 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="example-2" class="css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-2 {
    display: -webkit-inline-flex;
    display: inline-flex;
    
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
/* flex und inline-flex sehen auf den ersten Blick gleich aus. Insofern soviel Inhalt vorhanden sind, dass sie die ganze verfügbare Breite einnehmen.
Die Unterschiede zwischen flex und inline-flex werden in Beispiel Nr. 9 und Nr. 10 deutlich. */
Beispiel nur für: Google ChromeOpera

Beispiel Nr. 8 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<small>ein small davor</small>
<div class="example-3 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<div class="example-3 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<div class="example-3 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<em>ein em dahinter</em>

CSS:

.example-3 {
    display: -webkit-flex;
    display: flex;
}
/* Innerhalb einer Flexbox verhalten sich flex und inline-flex gleich. 
Den Unterschied macht das Verhalten im Elementfluß aus. flex verhält sich wie display: block, das Element nimmt immer eine ganze Zeile ein, auch wenn weniger Inhalt vorhanden ist. Elemente davor und dahinter fließen nie in der selben Reihe wie eine flex-Flexbox.*/
Beispiel nur für: Google ChromeOpera

Beispiel Nr. 9 So sieht's aus:

ein small davor
Lorem ipsum dolor sit amet
sed diam
Lorem ipsum dolor sit amet
sed diam
Lorem ipsum dolor sit amet
sed diam
ein em dahinter
 

HTML:

<small>ein small davor</small>
<div class="example-4 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<div class="example-4 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<div class="example-4 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<div class="example-4 css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
</div>
<em>ein em dahinter</em>

CSS:

.example-4 {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.example-3 .box-1,
.example-4 .box-1 {
    width: 60px;
}
/* inline-flex verhält sich wie display: inline-block. Das Element selber fließt im Elementenfluß, andere Elemente können in vor und hinter dem Element vorkommen.
Das Verhalten innerhalb der Flexbox ist dann aber das Flexbox-Verhalten. */
Beispiel nur für: Google ChromeOpera

Beispiel Nr. 10 So sieht's aus:

ein small davor
Lorem ipsum dolor sit amet
sed diam
Lorem ipsum dolor sit amet
sed diam
Lorem ipsum dolor sit amet
sed diam
Lorem ipsum dolor sit amet
sed diam
ein em dahinter
 

HTML:

<div id="testcase-vendor-flexbox" class="css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

/* Testcase (flex) Vendor-Präfixe: */
#testcase-vendor-flexbox {
    display: -moz-flex;
    display: -webkit-flex;
    display: -o-flex;
    display: -ms-flex;
}
Beispiel nur für: Google Chrome

Testbeispiel: Schreibweise mit
Vendor-Präfix

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="testcase-standard-flexbox" class="css3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

/* Testcase (flex) Standardschreibweise: */
#testcase-standard-flexbox {
    display: flex;
}
Beispiel nur für: Opera

Testbeispiel: Standardschreibweise

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.135 sec.