Blockelemente und Inlineelemente

zum Menu
Blockelemente lösen einen Zeilenumbruch aus, Inlineelemente nicht. Am besten erläutert man das anhand eines Beispiels. Diesmal lassen wir dem Browser seine Voreinstellung (default) und führen keinen Reset durch. Deshalb kannst du nun schön sehen, wie das DIV-Element keine Abstände generiert, das P-Element aber schon. Siehst du den Abstand zwischen den P-Elementen? Hier siehst du auch, dass die SPAN-Elemente keinen Zeilenumbruch generieren. Sie bleiben in der Zeile und fügen sich ein, weil das SPAN-Element ein Inline-Element ist, d.h. es bleibt in line.

Code und Ergebnis

P-Element, DIV-Element und SPAN-Element

<div>Ich bin ein DIV-Element.</div>
<div>Ich bin auch ein DIV-Element.</div>
<div>Ich bin auch ein DIV-Element.</div>
<p>Ich bin ein P-Element.</p>
<p>Ich bin auch ein P-Element.</p>
<p>Ich auch.</p>
<p>Ich auch.</p>
<div>Div Div Div Div <p>P P P</p> Div Div Div </div>
Ich bin ein DIV-Element.
Ich bin auch ein DIV-Element.
Ich bin auch ein DIV-Element.

Ich bin ein P-Element.

Ich bin auch ein P-Element.

Ich auch.

Ich auch.

Div Div Div Div

P P P

Div Div Div
<div>Div Div Div <span>Span</span> Div Div Div</div>
<p>P P P <span>Span </span>P P P</p>
Div Div Div Span Div Div Div

P P P Span P P P

    © primitivecode.com    CSS ist valide!