Warum funktioniert "Inline-block" in diesem CSS nicht richtig?

Dies ist tatsächlich erwartetes Verhalten in HTML. Da Sie Inline-Block verwenden, werden alle Zeilenvorschubzeichen oder Leerzeichen, die Sie nach dem Element und vor einem weiteren Inline-Element haben, als Leerzeichen gezählt. Wenn Sie möchten, dass die Blöcke wie in Ihrem Bild nebeneinander gestapelt werden, müsste Ihr HTML-Code so aussehen.

funktionierende Demo

Es ist nicht sehr hübsch, aber andererseits würde ich empfehlen, einen anderen Ansatz zu verwenden und stattdessen die Elemente zu schweben.

Hier finden Sie eine ausführlichere Erklärung, warum dies auftritt.

Wie entferne ich den Abstand zwischen Inline-Blockelementen?

Einfach erweitern Antwort von @Tristan hier geben.

Sie haben den css-Code unnötigerweise wiederholt. Sie können es verkleinern, indem Sie mehrere CSS wie:

ODER

Sie können Elemente nebeneinander halten, indem Sie einen der folgenden Ansätze verwenden:

• Verwendung von display: table-cell

• Verwendung von float: left

• Verwendung der Anzeige: Inline-Block ( @ Tristan-Lösung überprüfen )

Fügen Sie stattdessen float:left; zu Ihrem div.ex , div.ex2 und div.ex3 hinzu.

JSFIDDLE

UPDATE: Fügen Sie position:absolute zum zweiten und dritten Div hinzu, wenn float keine Wahl ist.

FIDDLE

UPDATE 2: Fügen Sie dies nur zum dritten Div hinzu, wenn Sie diesen Zwischenraum benötigen.

FIDDLE

Mein Trick ist die Schriftgröße: 0; im Elternelement, weil es die Schriftgröße ist, die verursacht, dass die Mathematik nicht perfekt addiert wird (etwa 4 px Überlappung pro div, abhängig von der Bildschirmgröße) und bewirkt, dass ein div unter dem anderen erscheint.

Sie können Kommentare wie diese verklagen (das sieht im Code etwas besser aus):