Display
Die unsichtbare Regieanweisung
In der magischen Welt des CSS entscheidet display, wie deine Elemente auftreten oder ob sie überhaupt auf die Bühne treten! Ein block-Element betritt die Bühne mit vollem Pomp und nimmt den ganzen Platz ein, wie ein König auf seinem Thron. Niemand wagt es, sich neben ihm aufzureihen. Inline-Elemente hingegen sind die eleganten Tänzer im Hintergrund, die sich nur so viel Raum nehmen, wie sie wirklich brauchen, und leise nebeneinander stehen.
Und dann gibt es noch inline-block, den diplomatischen Akrobaten, der wie ein Block seine eigene Größe hat, aber trotzdem brav neben seinen Kollegen steht. Doch wenn du wirklich zaubern willst, kannst du mit display: none ein Element ganz verschwinden lassen, als wäre es nie da gewesen.
Sichtbarkeit mit Regeln
Block, Inline, Inline-Block oder einfach weg – entscheide, wie Elemente sich verhalten!
Display
Die unsichtbare Bühnenanweisung
Mit display sagst du deinem Element, wie es sich verhalten soll. Wird es sich wie ein majestätischer Block breitmachen? Oder eher wie ein Inline-Element leise und schmal in einer Reihe stehen? Oder wird es vielleicht sogar ganz verschwinden? Das Display-Attribut bestimmt, wie ein Element in die Layout-Matrix der Webseite eingebettet wird.
Block
Der Platzhirsch
Ein Block-Element ist wie ein Herrscher auf dem Thron: Es beansprucht die gesamte Breite, unabhängig davon, ob es den Platz wirklich benötigt. Es beginnt immer auf einer neuen Zeile und duldet keine anderen Elemente in seiner Reihe. Für die meisten HTML-Elemente ist das der Standardzustand.
.element {
display: block;
}Das .element wird als Block-Element dargestellt und nimmt die gesamte verfügbare Breite ein.
Inline
Der elegante Tänzer
Inline-Elemente sind der Gegenpart zu den Block-Herrschern. Sie tanzen leichtfüßig nebeneinander her und nehmen nur so viel Platz ein, wie sie wirklich brauchen. Sie ziehen keine Zeilenumbrüche nach sich. So können Text, Bilder und Links harmonisch in einer Reihe stehen.
.element {
display: inline;
}Das .element wird als Inline-Element dargestellt und nimmt nur so viel Platz ein, wie sein Inhalt benötigt.
Inline-block
Der Balanceakt zwischen den Welten
inline-block ist der elegante Tänzer auf dem schmalen Grat zwischen inline und block. Es kombiniert das Beste aus beiden Welten. Wie ein inline-Element steht es brav in einer Reihe neben seinen Geschwistern, aber wie ein block-Element darf es stolz seine eigene Höhe und Breite festlegen. Es ist das perfekte Mittelmaß, wenn du Elemente haben möchtest, die nebeneinander stehen, aber dennoch blockartige Kontrolle über ihre Größe und Struktur brauchen.
.element {
display: inline-block;
}Das .element kombiniert Eigenschaften von Block- und Inline-Elementen: Es reiht sich neben anderen Elementen ein, kann aber wie ein Block formatiert werden, etwa mit festen Breiten und Höhen.
None
Der Unsichtbare
Manchmal brauchst du ein Element, das einfach verschwindet, ohne Drama, ohne Spuren. Mit display: none wird das Element aus dem Layout entfernt, als hätte es nie existiert. Ideal, um etwas unsichtbar zu machen, ohne den Seitenfluss zu stören – und bei Bedarf kannst du es jederzeit mühelos wieder aus dem Hut zaubern.
.element {
display: none;
}Das .element wird vollständig aus dem Layout entfernt und bleibt unsichtbar, ohne Platz im Dokument einzunehmen.
In dieser Lektion hast du gelernt…
- Wie du
display: blocknutzt, um Elemente in einer neuen Zeile anzuzeigen und ihre gesamte Breite zu beanspruchen. - Weshalb
display: inlineideal ist, wenn du Elemente nebeneinander platzieren möchtest, ohne dass sie eine eigene Zeile einnehmen. - Auf welche Weise
display: inline-blockeine Mischung aus beidem darstellt, indem es sich wie ein Inline-Element verhält, aber trotzdem Größe und Abstand kontrolliert werden können. - Warum
display: nonehilfreich ist, um Elemente unsichtbar zu machen, ohne dass sie Platz im Layout beanspruchen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Geheimnisse der Schatten
Umbra, die selbsternannte Königin der Heimlichkeit, hat wieder zugeschlagen. Ihre Schattenillusionen sind so trickreich, dass selbst die hellsten Köpfe in Sackgassen landen. Doch keine Sorge, mit der Macht der Display-Formen bist du gewappnet! Lerne, Elemente elegant verschwinden zu lassen, sie dramatisch ins Rampenlicht zu rücken oder sie wie ein Chamäleon die Gestalt wechseln zu lassen. Mit diesem Wissen findest du garantiert den Weg durch ihre finsteren Täuschungen – und sie wird sich wünschen, nie ein Spielchen mit dir begonnen zu haben!
Deine Aufgabe: Die Anwendung der Selektoren
- Block-Element erstellen:
Setze ein Element auf display: block; und überprüfe, wie es sich über die gesamte verfügbare Breite erstreckt. Achte darauf, wie das Element unterhalb anderer Elemente platziert wird. - Inline-Element verstehen:
Setze ein Element auf display: inline; und beobachte, wie es sich neben anderen Inline-Elementen platziert. Teste, wie sich die Breite und Höhe des Elements verhalten. - Inline-Block testen:
Verwende display: inline-block;, um ein Element zu gestalten, das sich ähnlich wie ein Inline-Element verhält, aber wie ein Block-Element eine feste Breite und Höhe haben kann. - Versteckte Elemente (display: none):
Setze ein Element auf display: none;, um es komplett aus der Ansicht zu entfernen. Teste, wie sich die Anordnung anderer Elemente verändert, wenn ein Element auf diese Weise verborgen ist. - Kombination der Display-Formen:
Experimentiere mit den verschiedenen Display-Formen, indem du sie auf andere Elemente in der HTML-Struktur anwendest. Teste, wie sich die Darstellung und das Verhalten der Elemente ändern, je nachdem, welche Display-Eigenschaft du anwendest.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
/* Display-Typen */
.block {
display: block;
background: linear-gradient(135deg, #4caf50, #2e7d32);
border: 2px solid #81c784;
}
.inline {
display: inline;
background: linear-gradient(135deg, #e57373, #c62828);
border: 2px solid #ef9a9a;
}
.inline-block {
display: inline-block;
background: linear-gradient(135deg, #1e88e5, #1565c0);
border: 2px solid #90caf9;
width: 150px;
}
.none {
display: none;
}
/* Inline vs. Block */
.inline-vs-block {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding: 15px;
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
border: 2px dashed #fff;
}
.inline-vs-block span,
.inline-vs-block div {
padding: 10px;
font-size: 1.2rem;
}
.inline-vs-block span {
display: inline;
background: #ff5722;
border: 2px solid #ff8a65;
}
.inline-vs-block div {
display: block;
background: #8e44ad;
border: 2px solid #b39ddb;
}