CSS Display Generator

In CSS wird die Eigenschaft display verwendet, um zu steuern, wie ein HTML-Element im Webbrowser gerendert wird. Sie gibt den Typ der für ein HTML-Element verwendeten Box an, was sich wiederum auf die Positionierung, Größe und das Verhalten des Elements im Dokumentfluss auswirkt. Die Eigenschaft display akzeptiert verschiedene Werte, von denen jeder ein anderes Rendering-Verhalten definiert. Einige gängige Werte für die Eigenschaft display sind:

• block: Dieser Wert macht das Element zu einem Block-Level-Element. Block-Level-Elemente beginnen typischerweise in einer neuen Zeile und dehnen sich aus, um den verfügbaren horizontalen Platz auszufüllen. Beispiele für Block-Level-Elemente sind <‌div‌>, <‌p‌> und <‌h1‌>.
• inline: Dieser Wert macht das Element zu einem Inline-Level-Element. Inline-Level-Elemente beginnen nicht in einer neuen Zeile und nehmen nur so viel Breite ein, wie nötig ist. Beispiele für Inline-Level-Elemente sind <‌span‌>, <‌a‌> und <‌strong‌>.
• inline-block: Dieser Wert kombiniert die Eigenschaften von Block-Level- und Inline-Level-Elementen. Er ermöglicht es dem Element, inline mit anderen Inhalten zu fließen, während es dennoch möglich ist, eine Breite und Höhe festzulegen und Ränder und Abstände zu empfangen.
• none: Dieser Wert blendet das Element vollständig aus der Rendering aus, wodurch es unsichtbar wird und keinen Platz im Dokumentfluss einnimmt. Er wird oft verwendet, um Elemente mithilfe von JavaScript dynamisch auszublenden oder anzuzeigen.
• flex: Dieser Wert verwandelt das Element in einen Flex-Container, sodass Sie das Flexbox-Layoutmodell für seine Kinder verwenden können.
• grid: Dieser Wert verwandelt das Element in einen Grid-Container, sodass Sie das CSS-Grid-Layout für seine Kinder verwenden können.

Hier ist ein Beispiel für die Verwendung der Eigenschaft display:

Die Eigenschaft display ist eine grundlegende CSS-Eigenschaft, die eine entscheidende Rolle bei der Steuerung des Layouts und der Rendering von HTML-Elementen auf einer Webseite spielt. Die Wahl des geeigneten display-Werts für ein Element kann sein Aussehen und Verhalten erheblich beeinflussen.