Grundlagen

ID #1022

Was sind Block-Elemente, was sind Inline-Elemente ?

Block- und Inline-Elemente sind grundlegende Konzepte hinter HTML. Kurz gesagt: ein Blockelement erzeugt vor und nach sich einen Absatz. Inline-Elemente tun dies nicht. Bekannte Beispiele:
Absatz, Überschrift, Tabelle und das
(vulgo: Layer) sind Block-Elemente. Ein Bild, ein Link oder das -Tag sind Inline-Elemente.

Durch die Eigenschaft "display" kann man aus einem Inline- ein Block-Element machen und umgekehrt.
img {display: block;} /* Jetzt schafft sich das Bild Platz um sich herum*/
h1 {display: inline;} /* Auch eine Art, die großen Abstände nach der Überschrift loszuwerden. */

Tags: -

Verwandte Artikel:

Letzte Änderung des Artikels: 2004-08-30 15:19
Autor: Jens Grochtdreis
Revision: 1.0

Digg it! Share on Facebook Artikel ausdrucken Artikel weiterempfehlen Als PDF-Datei anzeigen
Übersetzungsvorschlag für Übersetzungsvorschlag für
Bewertung der Nützlichkeit dieses Artikels:

Durchschnittliche Bewertung: 4.6 (5 Abstimmungen)

vollkommen überflüssig 1 2 3 4 5 sehr wertvoll

Kommentieren nicht möglich

Kommentar von Terry:
Das mit dem \"Platz schaffen\" ist nicht der springende Punkt und stimmt auch nicht immer.
Blockelemente bilden immer eine neue Zeile, sofern nicht mit float positioniert.Dies dann aber oft ohne Lücke (divs z.B.).

Inline-Elemente stehen dagegen nebeneinander. So steht ein Bild im standardkonformen Modus allerdings immer auf der Testgrundlinie, was manchmal störend sein kann und Lücken erzeugt. Diese Lücken verschwinden dann z.B. durch display:block. -> mehr darüber auch hier: [url]http://www.dodabo.de/html+css/img-table/[/url]

Bei Deinem Beispiel mit der Überschrift erreichst Du durch display:inline, dass der anschließende Text direkt neben der Überschrift steht, so ein Zeilenumbruch nicht durch
resp.
erzwungen wird.
Added at: 2038-01-19 04:14