Abstand zwischen display: inline-block; Elementen

Wird in einem HTML-Editor nach einem inline-block Element mit einer neue Zeile begonnen. Wird der Browser hier ein Leerzeichen interpretieren. Je nach Schriftgröße ist dann eine ensprechend große Lücke zu dem nächsten inline-block Element. Z.B. :

<div class="inline-block">some Content...</div>
<div class="inline-block">some Content...</div>
<div class="inline-block">some Content...</div>
<div class="inline-block">some Content...</div>

Ein einfacher Fix wäre es alles in eine Zeile zu schreiben.

<div class="inline-block">some Content...</div><div class="inline-block">some Content...</div><div class="inline-block">some Content...</div><div class="inline-block">some Content...</div>

Oder einen Kommentar so dazwischen zu schieben

<div class="inline-block">some Content...</div><!--
--><div class="inline-block">some Content...</div><!--
--><div class="inline-block">some Content...</div><!--
--><div class="inline-block">some Content...</div><!--
-->

Oder dem Elternelement font-size: 0; geben.

Veröffentlicht am
Kategorisiert in html