CSS Inline-block
Die letzte Lektion hat die Alltagswerte von display kartiert. Hier üben Sie den Hybrid: inline-block. Nachbarn sollen in einer Zeile bleiben, wenn Platz ist — wie Text — und trotzdem eine echte Box brauchen, die width, height und padding ernst nimmt. Das ist der Job.
Vergleich nebeneinander
📊 Inline vs inline-block vs block
| Modus | Zeilenverhalten | Width / height / padding |
|---|---|---|
inline |
Sitzt in der Textzeile | Width/height meist ignoriert; padding kann seltsam wirken |
inline-block |
Bleibt in der Zeile, wenn Platz bleibt | Width, height und padding wirken wie eine Box |
block |
Beginnt in der eigenen Zeile | Volles Box-Modell; füllt oft die Zeilenbreite |
Wählen Sie inline-block, wenn das Element eine Zeile mit Geschwistern teilen soll und trotzdem messbare Größe braucht — Chips, Tags, Icon-Labels, kompakte Toolbar-Buttons. Ganzseitige Spalten und komplexe Ausrichtung gehören später zu Flexbox und Grid.
Ein bemessener Chip, der die Zeile teilt
Anders als reines inline kann ein Chip Padding und feste Breite behalten und neben anderen Chips sitzen.
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}
Eine einfache Toolbar-Zeile
Mehrere gleich breite Steuerelemente können in einer Zeile sitzen. Abstände kommen über margin. Für eine ruhige Toolbar reicht das, bis Flexbox kommt.
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}
Vertikale Ausrichtung in der Zeile
Inline-Level-Boxen können neben Text oder Bildern unterschiedlich hoch sitzen. vertical-align rückt sie — middle ist eine ruhige Wahl für Icon+Label-Paare.
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}
.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}
Die Whitespace-Lückenfalle
Browser behandeln Leerzeichen und Zeilenumbrüche zwischen Tags als Textknoten. Zwischen zwei inline-block-Geschwistern wird dieser kleine Abstand zur sichtbaren Lücke. Das ist nicht Flexbox-gap — es ist restliches HTML-Whitespace.
/* HTML wie:
<span class="tile">A</span>
<span class="tile">B</span>
lässt durch den Umbruch eine Lücke. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}
Lücken beruhigen: Tags ohne Leerzeichen in eine Zeile, Zeilenumbruch auskommentieren oder vorsichtig kleinen negativen Margin setzen. Später gibt Flexbox saubereren Abstand — zwingen Sie nicht jede Zeile ewig durch inline-block.
Eine ruhige inline-block-Gewohnheit
Nutzen Sie eine gemeinsame Klasse für Zeilenelemente. Bemessen Sie absichtlich. Beheben Sie Whitespace nur, wenn die Lücke stört. Bauen Sie keine ganze Seitenlayouts mit verschachtelten inline-blocks — so kehrt der Float-Schmerz zurück. Position und float haben eigene Lektionen.
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
Selbst ausprobieren
- Bauen Sie drei
.chip-Elemente mitinline-block, fester Breite und Padding — beobachten Sie die gemeinsame Zeile. - Machen Sie eine Vier-Button-
.tool-Toolbar mit gleicher Breite undmargin-right. - Setzen Sie ein kleines
.iconneben.labelund testen Sievertical-align: middle. - Setzen Sie zwei
.tile-Geschwister auf getrennte HTML-Zeilen, dann auf eine — vergleichen Sie die Lücke. - Schreiben Sie einen Satz: Wann reicht inline-block, wann warten Sie auf Flexbox?
Häufige Fehler
- Erwarten, dass reines
inlinewidth/heightwie eine echte Box ehrt - CSS für eine „mysteriöse Lücke“ beschuldigen, die eigentlich HTML-Whitespace zwischen Tags ist
- Mit inline-block ein ganzes mehrspaltiges Seitenlayout erfinden
- Diese Lektion wie den breiten
display-Überblick (block / none) von zuletzt behandeln - Hier in
position- oderfloat-Rezepte springen statt den Hybrid zu meistern
Kurzfassung
inline-blocksitzt wie Text in einer Zeile, behält aber ein echtes Box-Modell für Größe und Padding- Ideal für Chips, kompakte Toolbars und Icon+Label-Paare
vertical-alignhilft, unterschiedlich hohe Nachbarn auszurichten- Whitespace zwischen Tags kann eine sichtbare Lücke erzeugen — kennen Sie die Ursache
- Für komplexe Zeilen und saubere Abstände kommt Flexbox später; halten Sie inline-block absichtlich
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 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