Lädt...

CSS Display

display beantwortet eine ruhige Frage: Wie tritt diese Box in die Seite ein? Manche stapeln sich als volle Blöcke; andere sitzen in einem Satz; manche lassen sich ganz aus dem Layout nehmen. Diese Lektion kartiert die Alltagswerte — und lässt tiefes inline-block-Üben für die nächste Sitzung.

Ein Display-Werkzeugkasten

📊 Display auf einen Blick

Wert Alltagaufgabe
block Beginnt in der eigenen Zeile; füllt oft die Zeilenbreite
inline Lebt in der Textzeile; width/height werden meist ignoriert
inline-block Sitzt wie Text in einer Zeile, akzeptiert aber width/height/padding wie eine Box
none Entfernt das Element aus dem Layout (Platz klappt zusammen)
flex / grid Starke Layout-Modi — spätere Lektionen, nicht hier

Standard-HTML wählt schon display für viele Tags (div ist block, span ist inline, button oft eher inline-block). CSS lässt Sie das überschreiben, wenn der Fluss einen anderen Job braucht.

Block — eigene Zeile, geräumige Box

Block-Boxen beginnen in einer neuen Zeile und nehmen typischerweise die verfügbare Breite. Überschriften, Absätze und divs verhalten sich so standardmäßig.

Block erzwingen

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — im Satz

Inline-Boxen sitzen im Textfluss und umbrechen mit den Wörtern. width oder height auf rein inline bringt meist nichts — deshalb greifen Leute zu block oder inline-block.

Inline erzwingen

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — kurzer Blick

inline-block hält Nachbarn in einer Zeile, wenn Platz ist, respektiert aber trotzdem width, height und padding. Sie üben es gründlich in der nächsten Lektion; hier nur das Hybrid erkennen.

Inline-block-Blick

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — aus dem Layout

display: none versteckt das Element und klappt seinen Platz ein. Layout und viele Hilfsmittel behandeln es als weg. Lieber eine Klassen-Umschaltung als verstreute Regeln.

Mit none verstecken

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden ist eine andere Geschichte — die Box kann Platz reservieren. Diese Lektion bleibt bei display: none für echte Entfernung aus dem Layout. Visibility vertiefen wir hier nicht.

Eine ruhige Display-Gewohnheit

Ändern Sie display aus Flussgründen — nicht für Button-Kosmetik (vorige Lektion) und nicht als Abkürzung für jedes Layout-Problem (flex/grid später). Benennen Sie bewusste Zustände mit Klassen.

Ein- und Ausblenden-Klassen

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Drei Modi vergleichen

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Selbst ausprobieren

  1. Erzwingen Sie bei einem span display: block und geben Sie width + padding.
  2. Erzwingen Sie bei einem kurzen div (oder Heading) display: inline und sehen Sie es im Satz.
  3. Fügen Sie ein .chip mit inline-block hinzu — width/padding funktionieren.
  4. Verstecken Sie ein Panel mit .is-hidden { display: none; } und togglen Sie die Klasse.
  5. Schreiben Sie einen Satz: wann block, wann inline für ein Label?

Häufige Fehler

  • Erwarten, dass width / height auf rein inline wirken
  • display: none nutzen, wenn Sie nur Optik dämpfen wollten — und vergessen, dass Platz weg ist
  • Diese Lektion wie Button-Hover-Häute behandeln (das war Buttons)
  • Flexbox/Grid-Rezepte hier abladen statt die vier Grundwerte zu lernen
  • „Aus dem Layout versteckt“ mit der tieferen inline-block-Lektion verwechseln

Kurzfassung

  • display steuert, wie eine Box in den Seitenfluss eintritt
  • block nimmt die eigene Zeile; inline lebt im Text
  • inline-block ist der Hybrid — Übung folgt
  • none entfernt Element und Platz aus dem Layout
  • Ändern Sie display für Flussjobs; lassen Sie schicke Layouts für später

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 35 von 35
Css Tutorial