Wenn man Inline Block verwendet tritt immer wieder mal mysteriöser Weise ein Abstand zwischen den Elementen auf der nicht in Firebug etc. ersichtlich ist. Dieses Problem tritt auf, weil der Whitespace zwischen den Elementen als Abstand gewertet wird. Dafür gibt es mehrere Lösungen:
- Keinen Whitespace zwischen den einzelnen inline-block Elementen
- Nach dem End-Tag einen HTML Comment einbauen bis zum nächsten Element
- -4px margin geben
- Keine End-Tags machen (z.b. nur <li>abc <li>cdf)
- Die Endtags direkt an die Anfangstags
- Die Parent Font-size auf 0 stellen
- Die Elemente floaten
Hier findet man das ganze auch mit Code Samples: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Danke!
bei einer sehr verwandten problematik hat mir „vertical-align: top“ geholfen, die abstände bei den inline-block elementen los zu werden.
Hi polygon,
tausend Dank für Deinen Beitrag. Ich hatte das Problem und habe es partou nicht in den Griff bekommen. Nachdem ich alles auf in meinem Reset alles auf „vertical-align: top“ gesetzt habe, ist alles so wie gewünscht! Danke für diesen Tip!