w3docs logo

CSS-Eigenschaft display

Die Eigenschaft display definiert den Typ der Box, die für ein HTML-Element verwendet wird. Der Standardwert dieser Eigenschaft ist "inline". Ein Inline-Element akzeptiert die Eigenschaften height und width nicht. Es wird sie einfach ignorieren.

Mit der Eigenschaft display können wir den Anfangswert eines Elements überschreiben. So könnte beispielsweise ein Element auf Blockebene als Inline-Element angezeigt werden, indem ein Wert "inline" angegeben wird.

In HTML werden die Standardwerte der Eigenschaft display aus dem Verhalten, das in den HTML-Spezifikationen beschrieben ist, oder aus dem Browser- oder Benutzerstylesheet übernommen. Andererseits ist der Standardwert in XML "inline".

Anfangswert inline
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS1
DOM Syntax object.style.display = "list-item";

Syntax

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>                    
      .display li{   	
      display: inline;
      margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft display</h2>
    <p>Hier wird das Listenelement mit seinem Anfangswert verwendet:</p>
    <ul>
      <li>Listenelement</li>
      <li>Listenelement</li>
    </ul>
    <p>Hier wird das Listenelement mit der Eigenschaft display verwendet. Es wird der Wert "inline" verwendet:</p>
    <ul class="display">
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
    </ul>
  </body>
</html>

Ein weiteres Beispiel, wo das Element als Blockelement angezeigt wird. Der Wert "inline" akzeptiert height und width nicht.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>  
      .inline {
      border: 1px solid #1c87c9;  
      display: inline; 	
      height: 30px;
      width: 300px;
      }                  
      .block {
      border: 1px solid #1c87c9;   	
      display: block;
      height: 30px;
      width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft display</h2>
    <p>Hier ist das Listenelement mit dem Wert "initial" verwendet. Der Wert "inline" akzeptiert height und width nicht:</p>
    <span>Das ist ein Text.</span>
    <span class="inline">Das ist ein anderer Text.</span>
    <hr>
    <p>Hier wird das Listenelement mit dem Wert "block" der Eigenschaft display verwendet:</p>
    <span class="block">Das ist ein Text.</span>
    <span class="block">Das ist ein anderer Text.</span>              
  </body>
</html>

Ein weiteres Beispiel mit dem Wert "block":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .block {
      display: block;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #8ebf42;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft display</h2>
    <div class="block">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. 
      <div class="hello">HALLO!</div>
     Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.
    </div>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "contents":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .contents {
      display: contents;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #ccc;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft display</h2>
    <div class="contents">
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.
      <div class="hello">HALLO!</div>
     Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. 
    </div>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "flex":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      #flex {
      width: 300px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      div {
      width: 70px;
      height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft display</h2>
    <p>Hier wird "display: flex;" verwendet:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
inline Zeigt ein Element als Inline-Element an. Das ist der Standardwert dieser Eigenschaft.
block Zeigt ein Element als Blockelement an.
contents Lässt den Container verschwinden, so dass die untergeordneten Elemente Kinder des Elements die nächsthöhere Ebene in DOM sind.
flex Darstellt ein Element als Block-Level-Flex-Container.
grid Darstellt ein Element als Block-Level-Grid-Container.
inline-block Darstellt ein Element als Inline-Level-Blockcontainer.
inline-flex Darstellt ein Element als Inline-Level-Flexcontainer.
inline-grid Darstellt ein Element als Inline-Level-Grid-Container.
inline-table Darstellt ein Element als Tabelle auf Inline-Ebene. Es verhält sich wie ein HTML-Element <table> , aber als Inline-Box und nicht als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Kontext auf Blockebene.
list-item Lässt das Element sich wie HTML-Element <li> verhalten.
run-in arstellt ein Element als Block oder inline je nach Kontext.
table Makes the element behave like HTML <table> element.
table-caption Lässt das Element sich wie HTML-Element <caption> verhalten.
table-column-group Lässt das Element sich wie HTML-Element <colgroup> verhalten.
table-header-group Lässt das Element sich wie HTML-Element <thead> verhalten.
table-footer-group Lässt das Element sich wie HTML-Element <tfoot> verhalten.
table-row-group Lässt das Element sich wie HTML-Element <tbody> verhalten.
table-cell Lässt das Element sich wie HTML-Element <td> verhalten.
table-column Lässt das Element sich wie HTML-Element <col> verhalten.
table-row Lässt das Element sich wie HTML-Element <tr> verhalten.
none Bedeutet, dass das Element überhaupt nicht angezeigt wird.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Welche sind gültige Werte für die CSS-Eigenschaft 'Display'?
Finden Sie das nützlich?