Block- & Inline-Elemente in HTML
Der Aufbau einer Website entsteht dadurch, wie Elemente gerendert werden. Block-Elemente werden untereinander dargestellt. Inline-Elemente in einer Zeile. Mit CSS kann das Standard-Verhalten verändert werden.

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.
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;
}
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%;
}
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;
}
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>
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;
}
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;
}
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. In diesem Zusammenhang sollte die Barrierefreiheit beachtet werden.
<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;
}
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;
}
Vielen Dank!
Spricht etwas dagegen, die Navigation statt über „display:inline“ per Flexbox zu steuern? Gibt es dabei einen Vorteil/Nachteil?
Sehr nützlich, danke.