Inline und Block-Elemente

[Matthias Scharwies]

Servus!

@@Mel

Herzlich willkommen!

Ich möchte mir gerade so eine Art Spickzettel machen, mit allen HTML-Tags und wollte diese farblich unterteilen, in Inline- und Block-Elemente. Ist das unnötig?

Zuerst würde ich mir noch mal die Begriffe angucken:

• HTML/Tutorials/Element, Tag und Attribut

HTML zeichnet Inhalt nach der Bedeutung aus; das sind die Elemente - eine Überschrift h1 oder ein li-Listenelement. Tags sind die „Etiketten“, die teilweise optional sind. (Bitte trotzdem immer setzen!)

Können alle Elemente in Inline und Block-Elemente unterteilt werden?

Einfache Antwort: njein.

Seitenstrukturierung:

• p
• h1, h2, h2, ...
• ul, ol, li

und die „Kapitel“ (gibt's nen besseren Begriff?)

• header
• main
• article
• section
• aside
• footer

sind von Haus aus „Blockelemente“, d. h. sie werden auf Bildschirmen 100% breit und wachsen bei mehr Inhalt nach unten.

In einem Absatz oder Listenelement kannst Du

• img
• a
• b

oder

• em tun, diese nehmen nur ihre Breite ein und der Text läuft davor und danach normal weiter, d.h sie sind inline-Elemente.

• HTML/Tutorials/Textauszeichnung

Und jetzt kommt's:

Manchmal kann es notwendig sein, inline-Elemente größer als die ursprüngliche Zeilenhöhe darzustellen.

Ein solcher Anwendungsbereich findet sich in Navigationen, wo die Klickflächen der Links größer und einheitlich formatiert werden sollen. Die Links sind inline-Elemente innerhalb der Blockelemente li. Eine Festlegung von Außen- oder Innenabständen wirkt sich in Schreibrichtung aus, nicht jedoch auf die Zeilenhöhe!

li {
  background: #dfac20;
  display: inline;
  padding: 0;	
  margin: 1em;	
}

a {
  display: inline-block;	
  border: thin solid;
  ...
  padding: .5em;	
  margin: .5em;		
}

Mit CSS machst du das a-Element zum inline-block oder block!

Hauptartikel: CSS/Tutorials/Ausrichtung/display

Und jetzt wird's total verwirrend: Du kannst ein a-Element um mehrere Absätze packen und so wird das inline-Element automatisch zum Block.

Ausführliche Antwort: Die HTML-Spezifaktion kennt da andere Arten von Inhalt.

Gibt es auch im Wiki:

• HTML/Tutorials/Kategorien

Und es gibt Elemente, die per User-Agent-Stylesheet für die display-Eigenschaft einen anderen Wert als inline oder block haben: list-item, table, table-row, table-cell u.a.m.

Herzliche Grüße

Matthias Scharwies