molily: Das inline-block whitespace-Problem

Beitrag lesen

Hallo,

das Verwenden von floats zum Aufbau der Seitenstruktur [sei] inzwischen ähnlich verpönt, wie damals die berüchtigten Tabellen-Layouts, oder das es zumindest auf gutem Weg dahin sei es in Zukunft zu werden.

Das ist insofern richtig, dass Floats nie dafür gedacht waren, Spaltenlayout umzusetzen und nicht den Anforderungen genügen, die die meisten Layouts mit sich bringen.

Es stimmt allerdings nicht, dass sie »inzwischen ähnlich verpönt sind wie Tabellenlayouts«. Die allermeisten CSS-Layouts setzen immer noch auf Floats, es ist immer noch die robusteste Layouttechnik. Es ist ein großer Hack. Aber ein guter, funktionierender Hack.

Als Alternative wird immer empfohlen auf Inline-Blocks zu setzen, ohne dabei zu vergessen auf das bekannte Problem mit den Leerräumen zwischen diesen hinzuweisen.

display: inline-block ist keine generelle Alternative zu Floats. In manchen Fällen ist inline-block sinnvoller. Aber niemand setzt inline-block fürs allgemeine Layouting ein. Dafür hat inline-block zuviele Fallstricke.

Ließe sich das Problem nicht auch einfach von vorneherein ausschalten, wenn man von Seiten des W3C für die CSS-Eigenschaft white-space einen zusätzlichen Parameter "none" (oder meinetwegen "remove") definieren würde, der dafür sorgt, dass sämtliche Whitespaces im betreffenden Element verschwinden?

Das ließe sich schon machen, aber wieso? inline-block ist nicht zum Layouting gedacht. Dafür wird es genauso zweckentfremdet wie Floats. inline-block ist zum Positionieren von kleineren Elementen innerhalb einer Zeilenbox gedacht, nicht dafür, um riesige Spalten zu layouten. Daher führt man keine CSS-Eigenschaft ein, die die komplette Logik von Block- und Inline-Boxen auf den Kopf stellt. Die ist nämlich seit eh und je an Whitespace-Handling gekoppelt.

Müsste man natürlich bei Texten ein wenig aufpassen, zumal white-space ja vererbbar ist, aber grundsätzlich wäre das doch (zumindest in meinen Augen) die sauberste Lösung ohne irgendwelche work-arounds.

Die sauberste Lösung ist die Verwendung von CSS-Techniken, die explizit zum Layouting gedacht sind: Flexbox, Multicolumn Layout, Regions… Nicht umsonst laufen Artikel wie http://css-tricks.com/fighting-the-space-between-inline-block-elements/ auf »just use Flexbox« hinaus. Wobei bekanntermaßen noch ein Float-Fallback nötig ist.

Mathias