Display-Eigenschaft: Block, Inline und Inline-Block

HTML-Elemente verhalten sich unterschiedlich, je nachdem, ob sie block, inline oder inline-block sind. Diese Anzeigearten beeinflussen das Layout, den Abstand und die anwendbaren CSS-Eigenschaften.

Block-Elemente

• Beginnen in einer neuen Zeile;
• Nehmen die volle Breite ihres Containers ein;
• Unterstützen width, height, margin, padding und border.

Häufige Beispiele: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Inline-Elemente

• Bleiben in derselben Zeile;
• Nehmen nur den für ihren Inhalt benötigten Platz ein;
• Breite oder Höhe kann nicht angewendet werden (aber Rahmen funktionieren).

Gängige Beispiele: <a>, <span>, <img>, <input>.

Inline-Block-Elemente

• Bleiben inline, wie Text;
• Unterstützen Breite, Höhe, Außenabstand (margin), Innenabstand (padding) und Rahmen (border), wie Block-Elemente.

Beispiele: <button>, <select>, <textarea>.

Nützlich, wenn Elemente nebeneinander stehen sollen, aber dennoch vollständige Gestaltungsmöglichkeiten benötigt werden.

Wichtige Unterschiede