Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

1.03.10

Why inline-block sucks

In dem Artikel CSS display: inline-block: why it rocks, and why it sucks beschreibt Robert Nyman die Ambivalenz mit der er den eigentlich sehr nützlichen Inline-Blocks gegenübersteht. Ja, Inline-Blocks sind ganz toll, weil man damit dem elenden Gefloate und dem Geclearfixe entkommt, doch es gibt eben auch einen „enormous drawback“.

White-Space im Quelltext wird beim Rendern bekanntlich etwas anders behandelt. Setzt man zwischen jedes Wort mehrere anstatt nur einem Leerzeichen, wird der ausgegebene Text trotzdem nur mit einem Leerzeichen dargestellt, während ein Zeilenumbruch im Quelltext kein Zeilenumbruch auf der fertigen Seite, sondern nur ein Leerzeichen bedeutet.

Dieses Verhalten bezieht sich nicht nur auf einzelne Wörter innerhalb von Blockelementen (anonymous inline boxes), sondern auch auf alle sog. Inline-Level-Elemente und zu diesen gehören leider auch Inline-Blocks.

Schreibt man seine Tags also fein untereinander, d.h. durch Zeilenumbrüche getrennt, klatscht der Browser zwischen jeden Inline-Block ein kleines nerviges Leerzeichen. Das lässt sich weder mit Margin, noch Padding beeinflussen und ist einfach da.

Damit werden Inline-Blocks als Alternative zu Floats äußerst unattraktiv. Mit Inline-Blocks möchte man Layouten, da ist jeder unkontrollierbare Abstand hinderlich. Liebes W3C: Fix it!

Kommentare [3]

molily am 1.03.2010 um 17:41

Inline-block ist genauso wie Float ein schlechter Hack für Anwendungen wie Mehrspaltenlayout. Es macht keinen Sinn, die Bedeutung von inline-block umzudefinieren; die ist so, wie sie ist, schon stimmig und logisch. Wir brauchen einfach vernünftige neue CSS-Techniken für Mehrspaltenlayout usw.

Markus Schlegel am 1.03.2010 um 18:29

So kann man das auch sehen. Aber auch wenn die Eigenschaft nicht für Spaltenlayouts gedacht ist, wird sie dafür verwendet (werden). Man kann’s den Leuten auch nicht verübeln, wenn die Alternativen fehlen.

div.outer { font-size: 0; }
div.inner { display: inline-block; font-size: 15px; }

Solche miesen Hacks nehme ich gerne in Kauf, wenn ich dafür nicht wie bei Floats im HTML rumpfuschen muss.

Schöner wäre es natürlich, wenn man von Haus aus etwas hätte, das für Mehrspalter gedacht ist. Aber das haben wir bei CSS (noch) nicht. Zumindest noch nicht gescheit in den Browsern.

(Aber ich habe die deutlich skeptischeren Leser als der Robert aus dem eingangs genannten Artikel, das gefällt mir, mal schauen, ob noch jemand über den bewussten Formulierungsfehler stolpert ;)

BajK am 14.06.2010 um 12:26

Kannst du nicht einfach deinen Code wie folgt schreiben:

blabla</div><div
class=„xyz“>Inhalt hier</div>

So könntest Du den Code dennoch übersichtlich untereinandergliedern und die Tatsache, dass das öffnende div auf der vorigen Zeile steht, stört auch nur minder.

PS: ich blick Dein „bc.“ Codeblock nicht

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll