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.