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.

Inhalt

• Block-Elemente
• Inline-Elemente
• 2 Inline-Elemente
• Bildunterschrift in einem Block-Element
• Inline-Element in Block-Element verschachteln
• Inline-Element mit display:block umwandeln
• HTML: margin-top, margin-bottom bzw. padding-top und padding-bottom bei Inline-Elementen
• HTML: Tabelle mit Block- und Inline-Elementen
• FAQs

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>

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>

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>

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;
}

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.

---

Die Anweisungen

  .p_text{
	margin-bottom:30px;
	} 

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.

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