Enzyklopädie CSS: display: block
| CSS: display | |
 Thematische Portale CSS-Portal • Portal für Webentwickler
|
Das CSS-Eigenschaft display: block weist einem Element ein blockartiges Verhalten zu. Es ist eine der am häufigsten verwendeten Werte der Eigenschaft display, die bestimmt, wie ein Element dargestellt wird und wie es den Platz auf der Seite einnimmt. Elemente mit diesem Wert beginnen immer in einer neuen Zeile und nehmen die gesamte verfügbare Breite des Containers ein, es sei denn, dies wird durch andere Stile eingeschränkt.
Eigenschaften des Verhaltens
- Einnahme der gesamten Breite des Containers: Ein Element mit
display: blockdehnt sich über die gesamte Breite des übergeordneten Elements aus, selbst wenn sein Inhalt dies nicht erfordert. - Start in einer neuen Zeile: Jedes Block-Element beginnt in einer neuen Zeile, und nachfolgende Elemente werden darunter platziert (sofern sie ebenfalls blockartig sind).
- Möglichkeit zur Größenanpassung: Für Block-Elemente können Breite (
width), Höhe (height), Innenabstände (padding), Außenabstände (margin) und Rahmen (border) festgelegt werden.
Anwendungsbeispiele
HTML und CSS
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel display: block</title>
<style>
.block-element {
display: block;
width: 50%;
padding: 10px;
margin: 10px auto;
background-color: lightblue;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<div class="block-element">Ich bin ein Block-Element</div>
<div class="block-element">Ich auch</div>
</body>
</html>
Erklärung
- Jedes Element mit der Klasse
block-elementnimmt 50 % der Breite seines übergeordneten Elements ein. - Die Elemente werden untereinander angeordnet, da sie blockartig sind.
Beispiele für Block-Elemente
In HTML sind folgende Elemente standardmäßig blockartig:
<div><p><h1>–<h6><ol>,<ul>,<li><section>,<article>,<aside>,<header>,<footer><form>
Vergleich mit anderen display-Werten
| Eigenschaft | Beschreibung |
|---|---|
inline
|
Das Element nimmt nur so viel Platz ein, wie sein Inhalt benötigt. |
inline-block
|
Kombiniert Eigenschaften von Block- und Inline-Elementen: Es nimmt Platz gemäß seinem Inhalt ein, unterstützt aber Größenangaben. |
none
|
Das Element wird vollständig aus der Anzeige entfernt und nimmt keinen Platz auf der Seite ein. |
Wann sollte display: block verwendet werden?
- Wenn ein Container für Inhalte erstellt werden soll, der von anderen Elementen getrennt ist.
- Zum Gestalten von größeren Textabschnitten oder Elementen wie Absätzen, Überschriften oder Abschnitten (
<section>). - Wenn eine Breite oder Höhe für ein Element festgelegt werden soll, damit es als separater Block erscheint.
Browserkompatibilität
Der Wert display: block wird von allen modernen Browsern unterstützt und gilt als grundlegende CSS-Eigenschaft. Dies macht ihn universell einsetzbar in der Webentwicklung.
Fazit
display: block ist die Grundlage für die Erstellung der Blockstruktur von Webseiten. Es ist intuitiv verständlich und bietet Flexibilität beim Layout-Design. Trotz seiner Einfachheit hilft das Wissen über die Feinheiten dieses Wertes, häufige Fehler zu vermeiden und Inhalte effektiv zu organisieren.