Die wunderbare Welt von inline-block

15. Juli 2013 - 11:39
display: inline-block

Was ist eigentlich dieses display: Inline-block und warum kann man es nicht benutzen? Warum und wann sollte man es vielleicht sogar benutzen?

Wie alles begann…

Als 1996 die erste CSS Version veröffentlicht wurde gab es schon die mysteriöse display-Eigenschaft. Erlaubte Werte waren none, block, inline und list-item.

Den Sinn der letzten beiden haben wir zu diesem Zeitpunkt nicht so richtig verstanden, aber wir konnten Dinge verstecken (none). Und nachdem sich der Staub gelegt hatte und wir aufhörten Dinge, die wir nicht haben wollten, zu verstecken anstatt sie zu entfernen, entdeckten wir dann die block-Eigenschaft. Wir konnten nun jedem Element eine Größe zuweisen: Toll!

Leider erzeugte jedes so ausgewiesene Element eine neue Zeile aber das war uns egal, denn wir wussten zu diesem Zeitpunkt ja schon von position: absolute und natürlich float. Super! Problem gelöst!

2011 kam dann in CSS 2.1 noch die Eigenschaft inline-block dazu mit der wir uns auch gerne beschäftigt hätten, allerdings konnte seinerzeit der Internet Explorer 6 noch nicht viel damit anfangen1.

Wir legten inline-block also zu den Akten der Dinge die wir wahrscheinlich ohnehin nie nutzen könnten. Der Browsermarkt war steinern und Updates waren noch nicht erfunden…

Neuanfang

Für alle die den Knall noch nicht gehört haben: Der Internet Explorer 6 hat keinen bedeutenden Marktanteil mehr und wir könnten aufhören uns mit floats und clearfixes herumzuärgern, hätten wir uns damals dieses inline-block mal genau angesehen:

Was genau tut es?

Nunja, im Grunde das Selbe wie display: block nur eben ohne eine neue Zeile zu erzeugen. Das mit display:inline-block ausgezeichnette Element, kann alle Eigenschaften eines Block Elementes haben und sich gleichzeitig am Textfluss orientieren.

Und warum ist das so toll?

Die Funktionsweise von einfachem Text bringt eine Menge Eigenschaften mit die man haben möchte.

Wie funktioniert denn einfacher Text?

Gute Frage!

Danke.

Gern. Worte in einem Text werden, je nach Schreibrichtung, horizontal hintereinander aufgereiht. Füllt eine Reihe den in der horizontalen verfügbaren Platz komplett aus, so nennt man das eine Zeile. Die folgenden Buchstaben werden horizontal darunter in einer neuen Zeile angeordnet. Das Resultat ist zum Beispiel ein Text wie dieser.

Hier ist ein gewöhnlicher Text mit mehreren Zeilen.

Wenn ein Wort, oder sagen wir lieber Element innerhalb des Textes eine Höhe, eine Breite und andere Eigenschaften hat kann man diesen Automatismus um so etwas wie ein Layout zu erzeugen.

Mit text-align: center; werden die Zeilen von der Mitte her gefüllt:

Hier ist ein gewöhnlicher Text mit mehreren Zeilen welcher mittig ausgerichtet ist.

Was ist daran neu?

Neu ist daran das wir dieses Verhalten auch auf Blöcke anwenden können.

Hier ein Block-Element. Und hier ein zweites.

text-align: left; hat dabei etwa den selben Effekt wie float: left und text-align: right; den selben wie float: right;. Daneben gibt es dann aber noch text-align:center;:

Hier ein Block-Element. Und hier ein zweites..

Mit einem kleinem Trick kann man sogar text-align: justify; verwenden.

Hier ein Block-Element. Und hier ein zweites.. Und hier ein drittes mit etwas mehr Text.

Warum hat das letzte Beispiel etwas mehr Text?

Um zu zeigen was passiert wenn die Inline-blöcke unterschiedliche höhen haben. Dieses Verhalten lässt sich nämlich bei Inline-Objekten über die EIgenschaft vertical-align steuern.

Ein Block Oben. Ein be­sonders langer Block zum Testen. und ein Block unten.

Wir können inline-Objekte also sogar vertikal ausrichten. Oben, unten und sogar zentriert, unabhängig von ihrer höhe. Man könnte also ganze Layouts ohne float, und damit auch ohne clear aufbauen.

Wo ist der Haken?

Leerzeichen. Der minimale Abstand zwischen zwei inline-Blöcken ist je nachdem ob ein Leerzeichen dazwischen ist oder nicht, eben ein Leerzeichen oder nichts.


  1. Tatsächlich konnte der IE6 display:inline-block auf inline Elemente anwenden. Allein dieser Umstand machte den Entwicklern wahrscheinlich ganz schön zu schaffen. 

Blog tags: 
CSS

Alexander Müller

Senior Developer

Neuen Kommentar schreiben