HTML: Block- und Inline-Elemente

Kategorie: HTML/CSS

Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code und gleichzeitig die Lösung für viele auftretende Webdesign-Probleme.

HTML- Block und Inline-Elemente

Inhalt

Block-Elemente

Block-Elemente dehnen sich immer über die ganze Zeile/Bildschirmbreite aus. Nachfolgende Elemente beginnen daher immer in der nächsten Zeile. Beispiele für Block-Elemente sind:

  • p
  • div
  • Überschriften h1 bis h6

Zwei Absätze p werden daher immer untereinander angezeigt und beanspruchen immer die ganze Breite, egal wieviel Text im jeweiligen Absatz steht.

<p>Absatz 1</p>
<p>Absatz 2</p>
<p>
Absatz 3. Mit mehr Text. Lorem ipsum dolor sit amet, consetetur sadipscing 
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. 
</p>

Absatz 1

Absatz 2

Absatz 3. Mit mehr Text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Genauso steht eine Überschrift immer automatisch über dem restlichen Text und geht über die ganze Zeilenbreite und div-Elemente werden ohne zusätzlichen CSS- Code standardmäßig untereinander angezeigt.

Inline-Elemente

Inline-Elemente sind immer nur so breit wie ihr Inhalt, es wird daher auch kein Zeilenumbruch erzeugt, solange die Breite der Zeile ausreicht, um mehrere Inline-Elemente nebeinander zu positionieren.
Zu der Kategorie der Inline-Element gehören beispielsweise:

  • span
  • strong
  • a
  • img
<span>Inline-Element 1</span> 
<span>2</span>
<span>breiteres Inline-Element 3</span>

Inline-Element 1 2 breiteres Inline-Element 3

Beispiel zur Verdeutlichung

Wenn ich ein Bild habe und möchte, dass die Bildunterschrift immer unter dem Bild steht, muss ich bedenken, dass das img-Element ein Inline-Element ist und daher die Bildunterschrift nicht automatisch unter dem Bild steht, weil das img-Element keinen Zeilenumbruch erzeugt und sich auch nicht über die ganze Breite ausdehnt.

Möglichkeit 1: 2 Inline-Elemente

Wird im Quellcode nach dem img-Tag ein span-Tag mit der Bildunterschrift eingefügt, so rückt diese Unterschrift nicht automatisch unter das Bild, weil beides Inline-Elemente sind.

<img src="mein_foto.jpg"/>
<span>Bildunterschrift</span>
Bildunterschrift

Möglichkeit 2: Bildunterschrift in einem Block-Element

Wird die Bildunterschrift in einem Block-Element, beispielsweise einen Absatz p, eingefügt rückt diese Unterschrift, wegen der block-Eigenschaften von p, immer unter das Bild.

<img src="mein_foto.jpg"/>
<p>Bildunterschrift</p>

Bildunterschrift

Möglichkeit 3: Inline-Element in einem Block-Element verschachteln

Inline-Elemente können in Block-Elemente verschachtelt werden, während es umgekehrt nicht möglich ist. Daher kann man das img-element einfach in einen div-Container packen und das Bild beansprucht die ganze Breite und erzeugt einen Zeilenumbruch, selbst wenn die Bildunterschrift in einem Inline-Tag steht.

<div>
<img src="mein_foto.jpg"/>
</div>
<span>Bildunterschrift</span>

Bildunterschrift

Möglichkeit 4: Inline-Element mit display:block umwandeln

Inline-Elemente können durch den CSS-Befehl display:block in Block-Elemente umgewandelt werden und erhalten somit auch alle Eigenschaften von Block-Elementen. Wird das img-Element mit der CSS-Klasse block_image in ein Block-Element umgewandelt, steht der folgende Text immer unter dem Bild.

<img src="mein_foto.jpg" class="block_image"/>
<span>Bildunterschrift</span>

Im CSS-Code:

.block_image{
display:block;
}
Bildunterschrift

HTML: margin-top, margin-bottom bzw. padding-top und padding-bottom bei Inline-Elementen

Beachten Sie, dass die Befehle

  • margin-top
  • margin-bottom
  • padding-top
  • padding-bottom

bei Inline-Elementen nicht funktionieren.

Beispiel

<p class="p_text">Hier steht ein Absatz in einem p-Element.</p>
<span class="span_text">Dieser Text steht in einem span-Element.</span>

Die CSS-Anweisungen margin-top, margin-bottom, padding-top und padding-bottom haben auf das span-Element keinen Effekt, weil es sich um ein Inline-Element handelt.
Für das p (Block-Element) dagegen wirken diese Anweisungen.


.span_text{
margin-top:30px;
} 

bzw.

.span_text{
padding-top:30px;
} 

zeigen keine Wirkung. In beiden Fällen gibt es keinen größeren Abstand oberhalb des span-Elementes. Die Anweisungen margin-top und padding-top wirken nicht, weil es sich bei span um ein Inline-element handelt.

Hier steht ein Absatz in einem p-Element.

Dieser Text steht in einem span-Element.


Die Anweisungen

  .p_text{
	margin-bottom:30px;
	} 

Hier steht ein Absatz in einem p-Element.

Dieser Text steht in einem span-Element.

bzw.

  .p_text{
	padding-bottom:30px;
	} 

führen dagegen zu einem größeren Abstand zwischen den beiden HTML-Textelementen. Das p-Element ist ein Blockelement die Anweisungen margin-top, margin-bottom, padding-top und padding-bottom wirken.

Hier steht ein Absatz in einem p-Element.

Dieser Text steht in einem span-Element.

HTML: Tabelle mit Block- und Inline-Elementen

Block-Elemente Inline-Elemente
  • <div>
  • <h1> bis <h6>, <p> <ul>, <ol>, <li>
  • <address>, <blockquote>, <pre>, <hr>
  • <form>, <fieldset>
  • <dd>, <dl>, <dt>
  • <table>, <tfoot>
  • <header>, <nav>, <main>, <aside>, <footer>
  • <article>, <section>
  • <video>, <canvas>
  • <figure>, <figcaption>
  • <noscript>
  • <a>, <img>
  • <abbr>, <acronym>, <cite>, <q>, <script>
  • <b><, big><, <em>, <i>, <strong>, <span>, <small>
  • <input>, <label>, <button>, <textarea>, <select>
  • <code>, <dfn>
  • <map>, <object>, <output>, <time>, <var>
  • <sub>, <sup>

FAQs

Was ist ein Block-Element?

Block-Elemente erstrecken sich über die ganze Breite des Bildschirms und erzeugen automatisch einen Zeilenumbruch. Vorherige oder nachfolgende Elemente befinden sich daher immer in einer anderen Zeile.

Was ist ein Inline-Element?

Inline-Elemente stehen nebeinander und erzeugen keinen Zeilenumbruch. Inline-Elemente nehmen nur die Breite ein, die nötig ist.

Verwandte Beiträge

CSS transform für Anfänger erklärt

Mit CSS transform verändern Sie die Objekte auf Ihrer Website. Verschieben, vergrößern, verkleinern, drehen oder scheren Sie HTML-Elemente. Inhalt CSS transform:translate – Objekte verschieben CSS transform:rotate – Objekte drehen CSS

CSS3 Animationen: transition erklärt

Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige

HTML Tipps: Elemente zur Textformatierung

Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML

HTML Tipps für besseren Quellcode

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist

Kontaktdaten auf der Homepage mit HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz