Inline-Block-Elemente

Manchmal wollen wir das Beste aus beiden Welten: Elemente, die sich wie Inline-Elemente in einer Reihe aufreihen, deren Größe wir aber wie bei Blöcken festlegen können. Genau das macht der Wert inline-block. Nach außen verhält sich so ein Element wie ein Inline-Element: Es sitzt in einer Zeile neben anderen Elementen, und wenn in der Zeile kein Platz mehr ist, rutscht es in die nächste. Nach innen ist es ein Block: width, height, Innenabstand und alle Außenabstände funktionieren bei ihm.

Buttons (button) sind standardmäßig inline-block. Deshalb können sie nebeneinander in einer Reihe stehen, und wir können trotzdem ihre Größe festlegen.

Die Rassen am Ende der Seite sind als Karten mit Breite, Innenabstand und Rahmen gestaltet. Als Listeneinträge stehen sie aber untereinander. Setzen wir sie in eine Reihe.