Webdesigner stoßen möglicherweise bereits auf die CSS-Eigenschaften "display: block", "display: inline" und "display:inline-block" und fragen sich, was es mit diesen verschiedenen Eigenschaften auf sich hat.
Auch ich war anfangs verwirrt und wusste nicht genau, wie sich Elemente mit diesen Eigenschaften verhalten.
Block-Elemente werden untereinander gerendert, während Inline-Elemente nebeneinander platziert werden. Das klingt zwar einfach, aber die genaue Funktionsweise dieser Eigenschaften wird in diesem Beitrag aufschlussreich erläutert.
Tauchen wir ein und lüften das Geheimnis hinter diesem Verhalten!
Was die Display-Eigenschaft bewirkt
Die CSS-Eigenschaft "display" dient dazu, das Verhalten und die Darstellung eines Elements auf einer Webseite zu steuern. Sie definiert, wie ein Element im Layoutmodell des Browsers angezeigt wird. Die "display"-Eigenschaft hat verschiedene mögliche Werte, die das Verhalten und die Darstellung des Elementes festlegen.
Auf folgende Werte dieser Eigenschaft werde ich eingehen:
block: Das Element wird als Blockelement behandelt. Es erzeugt einen Zeilenumbruch vor und nach sich und nimmt standardmäßig den gesamten verfügbaren horizontalen Platz ein.
inline: Das Element wird als Inline-Element behandelt und in einer Zeile mit anderen Inline-Elementen angezeigt. Es erzeugt keinen Zeilenumbruch und nimmt nur den Platz ein, der für den Inhalt benötigt wird.
inline-block: Das Element wird als Kombination aus Inline- und Blockelement behandelt. Es wird in einer Zeile angezeigt, erlaubt jedoch eine explizite Festlegung der Breite und Höhe sowie die Aufnahme von Blockeigenschaften wie Margin und Padding.
none: Das Element wird nicht angezeigt und aus dem Layout entfernt. Es wird unsichtbar gemacht, ohne dabei den Raum im Layout einzunehmen.
Die Eigenschaft "display" lässt sich auf Zwei wesentliche Dinge reduzieren:
-
Das äußere Verhalten des Elements – wie es mit seinen Nachbarn interagiert.
-
Das interne Verhalten des Elements – wie es die Platzierung seiner untergeordneten Elemente beeinflusst.
Display: Block
Die CSS-Eigenschaft "display: block" bewirkt Folgendes:
Block-Verhalten: Elemente, die mit "display: block" deklariert sind, werden als Blockelemente behandelt. Das bedeutet, dass sie standardmäßig eine neue Linie beginnen und den verfügbaren horizontalen Platz vollständig einnehmen. Blockelemente erzeugen einen Zeilenumbruch vor und nach sich.
Breite und Höhe: Blockelemente erstrecken sich standardmäßig über die gesamte Breite des Elternelements. Ihre Höhe wird durch den Inhalt, die Höhe oder das Padding beeinflusst. Mit "display: block" können Sie jedoch die Breite und Höhe des Elements explizit festlegen.
Box-Modell: Blockelemente respektieren das Box-Modell in CSS, was bedeutet, dass sie Margin, Border und Padding aufnehmen können. Diese Eigenschaften können verwendet werden, um Abstände zu anderen Elementen oder zusätzlichen Raum innerhalb des Elements zu erzeugen.
Container für andere Elemente: Blockelemente können andere Elemente enthalten, einschließlich Inline-Elemente, Inline-Block-Elemente und andere Blockelemente. Dies macht sie ideal für die Erstellung von Layoutstrukturen und die Gruppierung von Inhalten.
Verwendungszwecke: "display: block" wird häufig für strukturelle Elemente wie Überschriften (H1-H6), Absätze, Listen, Div-Container und Abschnitte verwendet. Es ermöglicht eine klare Trennung und Ausrichtung von Inhalten.
Display: Inline-Block
Die CSS-Eigenschaft "display: inline-block" kombiniert die Eigenschaften von "display: inline" und "display: block".
Hier nun, was "display: inline-block" bewirkt:
Inline-Verhalten: Elemente mit "display: inline-block" werden inline angezeigt, was bedeutet, dass sie in einer Zeile neben anderen Inline-Elementen platziert werden können. Im Gegensatz zu reinen Blockelementen erzwingen sie jedoch keinen Zeilenumbruch vor und nach sich.
Breite und Höhe: Im Gegensatz zu reinen Inline-Elementen können Elemente mit "display: inline-block" eine explizit festgelegte Breite und Höhe haben. Dies ermöglicht eine präzisere Kontrolle über das Layout und die Größe des Elements.
Box-Modell: Wie Blockelemente respektieren auch Inline-Block-Elemente das Box-Modell in CSS. Sie können Margin, Border und Padding aufnehmen und ermöglichen so die Gestaltung von Abständen und Inhalt innerhalb des Elements.
Container für Inline-Elemente: Inline-Block-Elemente können Inline-Elemente enthalten, z. B. Text oder andere Inline-Elemente. Dadurch eignen sie sich gut für die Erstellung von Layouts, in denen Inline-Elemente mit spezifischer Breite und Höhe verwendet werden müssen.
Ausrichtung: Mit "display: inline-block" können Elemente horizontal zentriert oder ausgerichtet werden, indem sie mit "text-align: center" oder anderen Ausrichtungseigenschaften des Elternelements kombiniert werden.
Du möchtest mehr über display:inline-bock erfahren? Dann lies diesen Beitrag dazu.
Display: Inline
Die CSS-Eigenschaft "display: inline" bewirkt Folgendes:
Inline-Verhalten: Elemente mit "display: inline" werden inline angezeigt, was bedeutet, dass sie in einer Zeile nebeneinander platziert werden. Sie nehmen nur den Platz ein, der für den Inhalt benötigt wird, und erzwingen keinen Zeilenumbruch vor oder nach sich.
Kein Zeilenumbruch: Im Gegensatz zu Blockelementen erzwingen Inline-Elemente keinen Zeilenumbruch. Sie können also direkt neben anderen Inline-Elementen oder Text platziert werden.
Keine explizite Breite/Höhe: Inline-Elemente nehmen die Breite und Höhe ihres Inhalts auf, können jedoch keine explizite Breite oder Höhe haben. Sie passen sich automatisch der Größe ihres Inhalts an.
Keine Box-Modell-Eigenschaften: Inline-Elemente ignorieren normalerweise das Box-Modell in CSS. Margin und Padding haben keinen Einfluss auf die Positionierung von Inline-Elementen. Border und Hintergrundfarbe können jedoch angewendet werden.
Keine Containerrolle: Inline-Elemente können normalerweise keine anderen Block- oder Inline-Elemente enthalten. Sie dienen eher als Teil des Inhaltsstroms, z. B. für Text oder kleine Inline-Icons.
