3.4.1.5) Block- und Inlineelemente

(X)HTML-Elemente unterscheidet man in 2 Klassen: Block-Element und Inline-Elemente. Zwischen diesen beiden Typen gibt es Unterschiede in der Handhabung per CSS und den verfügbaren CSS-Eigenschaften. Die Unterschiede und Eigenschaften sind häufig auch von den Dokumenttyp-Definitionen abhängig.

• Starten in neuer Zeile und enden mit Zeilenumbruch
• Folglich ist es ohne Einsatz von CSS nicht möglich, mehrere Block-Elemente nebeneinander darzustellen
• Block-Elemente können Inline-Elemente und andere Block-Elemente beinhalten, manchmal auch nur Inline-Elemente (z.B. <p>…</p> - Absatz), nur Block-Elemente oder keine weiteren Elemente (→ CSS4You.de Referenz!)
• Verwendung oft als Container, also übergeordnetes Element für andere Elemente

Wichtige CSS-Eigenschaften, die nur auf Block-Elemente angewendet werden können (Erklärung zur Anwendung kommt erst später, passt hier aber am besten):

• Werden in der aktuellen Zeile (im Textfluss) dargestellt (<br /> für Zeilenumbruch davor und danach notwendig)
• Inline-Elemente können nur andere Inline-Elemente beinhalten, manchmal auch keine weiteren Elemente (→ CSS4You Referenz!)
• Verwendungszweck sind für gewöhnlich Inhalte, die der Benutzer sieht, also Text, Bilder, Links, …

Die vertical-align: (Vertikale AUsrichtung) - Eigenschaft kann nur auf Inline-Elemente (und Tabellenzellen) angewendet werden.

Bei vielen Elementen kann man die Darstellung als Block-Element oder Inline-Element erzwingen, auch wenn es sich nicht um ein solches ELement handelt. Dies geht mit der Eigenschaft display: - Informationen darüber hier.