Block- & Inline-Elemente in HTML
Von kulturbanause Team 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;
}Geschrieben von kulturbanause Team
Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.
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.