kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Block- & Inline-Elemente in HTML

Den Aufbau einer Website könnt ihr euch als Verschachtelung von zahlreichen Boxen vorstellen. Jede Box entspricht hierbei einem HTML-Element und die wichtigsten Elemente sind immer entweder sog. Block- oder Inline-Elemente. Die Art des Elementes beeinflusst dessen Positionierung auf der Website.
In diesem Beitrag erklären wir euch, wie sich Block-und Inline-Elementen auf einer Seite verhalten, und wie ihr mittels CSS ein anderes Verhalten zuweisen könnt.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Die Basics

Jedes HTML-Element besitzt ein Standard-Verhalten, dass beschreibt, wie sich das Element auf der Website bzw. im Zusammenspiel mit anderen Elementen positioniert. Die globalen Layout-Elemente sind dabei meist Block-Elemente, filigranere Elemente sind oft Inline-Elemente. Es gibt auch noch weitere Standard-Verhalten, die wir in diesem Beitrag allerdings nicht behandeln, da sie selten vorkommen.

Mit Hilfe von CSS kann aus einem Inline-Element ein Block-Element und umgekehrt gemacht werden. Dazu später mehr.

Das Standard-Verhalten von Block-Elementen

Die Breite eines Block-Elements richtet sich nach dem vorhandenen Raum innerhalb seines Elternelements. Das Block-Element nimmt standardmäßig immer die volle Breite ein, sofern ihr den Wert nicht selbst mit CSS verändert habt. Mit jedem neuen Block-Element wird darüber hinaus ein weiterer Absatz erzeugt: Nachfolgende Elemente rutschen unter das Block-Element.

Je nach Elementtyp entsteht auch ein Abstand zum nächsten Element. Hierbei handelt es sich allerdings um eine vom Browser standardmäßig hinzugefügte CSS-Angabe (margin). Mit eigenen CSS-Angaben könnt ihr diese Standard-Werte überschreiben.

Block-Elemente sind neben den globalen Layoutelementen wie <header>, <footer>, <article>, <aside>, <section> und <nav> auch die Überschriften <h1> bis <h6>, Fließtextabsätze <p>,die Listenelemente <ul>, <ol><li> und viele weitere.

Das folgende Beispiel veranschaulicht das Block-Verhalten mit einer blauen Hintergrundfarbe für die einzelnen Elemente. Die Abstände zwischen den Elementen werden durch die Standard-Angaben des Browsers verursacht. Sollte euch das Box-Modell von CSS nicht geläufig sein, solltet ihr es euch im Zusammenhang mit diesem Artikel ebenfalls anschauen.

<body>
  <h1>Überschrift 1</h1> 
  <h2>Überschrift 2</h2>
  <h3>Überschrift 3</h3>
  <p>Absatz … Absatz </p>
  <ul>
    <li>ungeordnete Liste</li>
    <li>ungeordnete Liste</li>
    <li>ungeordnete Liste</li>
  </ul>
  <ol>
    <li>geordnete Liste</li>
    <li>geordnete Liste</li> 
    <li>geordnete Liste</li>
  </ol>
  <p>Absatz … Absatz </p>
</body>
h1, h2, h3, p, ul, ol {
  background-color: #096a7d;
  color: white;
}

Beispiel anschauen

Das <div>-Element

Block-Elemente können Text, Inline-Elemente und andere Block-Elemente enthalten. Auch das <div>-Element (div = division = Aufteilung) ist ein Block-Element, allerdings ohne semantische Bedeutung. Mit Hilfe eines <div> kann eine Webseite in mehrere Bereiche aufgeteilt werden. Auch können mit <div> andere HTML-Elemente wie Überschriften, Text und Grafiken in einem eigenen Container eingeschlossen werden. Anschließend kann mit dieser Container positioniert und gestaltet werden. Beachtet jedoch, dass der <div> immer nur dann verwendet werden sollte, wenn es kein semantisch sinnvolleres Element gibt.

Im folgenden Beispiel werden die Elemente <h1>, <h2>, <h3><p> und die Listen (<ul>, <ol>) von einem <div>-Element  umschlossen. Der <div> bekommt mittels CSS einen schwarzen Rahmen (border) und eine Breite von 50% zugewiesen. Die enthaltenen Block-Elemente orientieren sich nun an der Breite des <div>. Der <div> wiederum bezieht seine 50% von der Breite des <body>. Dieser orientiert sich an <html> und dieses Element am Browserfenster.

<body>
  <div>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <p>Absatz … Absatz </p>
    <ul>
      <li>ungeordnete Liste</li>
      <li>ungeordnete Liste</li>
      <li>ungeordnete Liste</li>
    </ul>
    <ol>
      <li>geordnete Liste</li>
      <li>geordnete Liste</li>
      <li>geordnete Liste</li>
    </ol>
  </div>
</body>

div {
  border: 1px solid black;
  width:50%;
}

Beispiel anschauen

Das Standard-Verhalten von Inline-Elementen

Die gerenderte Box eines Inline-Elements ist so breit und hoch wie ihr Inhalt. Inline-Elemente laufen in einer Zeile mit (in line) und erzeugt keinen neuen Absatz. Mehrere Inline-Elemente stehen daher nebeneinander. Die Höhe (height) und Breite (width) eines Inline-Elementes kann mit CSS nicht beeinflusst werden. Beispiele für Inline-Elemente sind <em>, <strong>, Hyperlinks (<a>) und Bilder (<img>).

Ein besonderes Inline-Element ist <span>, das genauso wie das Block-Element <div>, keine semantische Bedeutung besitzt. Der mit <span> eingeschlossene Bereich kann mit CSS individuell formatiert werden.

Wie das Standard-Verhalten von Inline-Elementen aussieht und wie mit <span> Textbereiche gestaltet werden können, zeigt das folgende Beispiel:

<body>
Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <em>laboris</em> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu <span>fugiat ulla</span> pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>

em, strong {
  background-color: #096a7d;
  color: white;
}

span {
  background-color: #F63;
  color: white;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
}

Beispiel anschauen

HTML5 und der Hyperlink

Inline-Elemente dürfen außer Text und anderen Inline-Elementen keine Block-Elemente enthalten. Eine Ausnahme stellt seit HTML5 das Inline-Element <a> dar. Wie im folgenden Beispiel zu sehen ist, kann der Hyperlink <a> Block-Elemente wie beispielsweise Überschriften (<h1> bis <h6>) und Textabsätze (<p>) beinhalten.

<a href="#">
  <h1>Überschrift</h1>
  <p>Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz </p>
</a>

Beispiel anschauen

Die display-Eigenschaft von CSS

Das Verhalten von Block- und Inline-Elementen kann mit der CSS-Eigenschaft display geändert werden. So kann beispielsweise das Inline-Element <strong> mit display: block zum Block-Element konvertiert werden. Es erzeugt dadurch einen neuen Absatz und reagiert auf die Angaben von Höhe und Breite.

<p>Das ist ein einzelner <strong>Absatz,</strong> in dem das <strong>strong-Element,</strong> eine neue Zeile erzeugt, da es sich jetzt wie ein Block-Element verhält. </p>

strong { 
  display:block; 
  height:200px; 
  width:500px; 
  background:lightgreen; 
}

Beispiel anschauen

Umgekehrt kann sich mit der CSS-Eigenschaft display: inline ein Block-Element wie ein Inline-Element verhalten. Ein gutes Beispiel ist die Navigation, die als Liste (ul > li) aufgebaut ist. Da die Listenelemente Block-Elemente sind, müssen diese für eine horizontale Navigation gezwungen werden, sich wie Inline-Elemente zu verhalten. Unser folgendes Beispiel veranschaulicht das:

<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Leistungen</a></li>
  <li><a href="#">Service</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>

Mit display: inline; ordnen sich die Listen-Elemente horizontal in einer Zeile  an. Der Vollständigkeit halber ist zu sagen, dass eine horizontale Navigation auch mit float für das Listenelement <li> umgesetzt werden könnte.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display:inline;
}

Beispiel anschauen

Elemente ausblenden mit display: none

Mit der CSS-Eigenschaft display: none könnte ihr HTML-Elemente auch ausblenden ohne dass ein Freiraum an dieser Stelle entsteht:

<body>
  <h1>Die Überschrift h1 ist zu sehen</h1>
  <h2>Die Überschrift h2 ist nicht zu sehen</h2>
  <h3>Die Überschrift h3 ist wieder zusehen</h3>
</body>
h2 {
  display: none;
}

Beispiel anschauen

Inline-Block-Elemente

Wie bereits erwähnt, erzeugen Inline-Elemente keinen neuen Absatz und werden nur so breit wie ihr Inhalt. Inline-Block-Elemente sind eine Kombination aus Inline- und Block-Boxen. Sie fließen wie Inline-Elemente in einer Zeile, erzeugen aber wie ein Block-Element Abstände zu den oberen und unteren Zeilen und reagieren auf die Angaben height und width im CSS-Code.

<body>
  <p>In diesem Absatz befindet sich ein <span>Inline-</span>Element. Absatz … Absatz </p>
  <p>In diesem Absatz befindet sich ein <span class="inline-block">Inline-Block-</span>Element. Absatz … Absatz</p>
</body>

span { 
  padding: 0.5em; 
  background-color: tan; 
} 

.inline-block { 
  display: inline-block; 
  width:300px; 
}

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.