Tyler Cipriani: CSS display inline-block Extra Margin/Space

comment 1

bestdenis2008 — Mon, 11 Nov 2013 06:39:14 +0000

Second, directly address the space by setting a negative right margin or negative

It’s a font-dependent solution, isn’t it?

comment 2

thcipriani — Mon, 11 Nov 2013 06:50:42 +0000

Yezzur, that solution will depend on the font-size of the parent container. An easier solution might be to just set font-size: 0; on the parent container.

The more I play with inline-block, the more I like the comment based solution.

You’ll see more solutions in that CSS Tricks article I have linked up.

comment 3

guest — Fri, 24 Jan 2014 14:29:22 +0000

or even better, set font-size: 0px on the parent div

comment 4

aayix — Thu, 24 Apr 2014 00:45:16 +0000

Yes Guest, font size 0px is required if you want to display the inline-block elements aligned to center. if u have text in the inner elements u’ll need to set the font size for those back again

comment 5

foo — Tue, 06 Jan 2015 15:32:35 +0000

Two alternatives:

set font-size: 0 on the immediate parent and redefine the font-size of the affected (inline-block) children
just use float: left. display: block is redundant (as it’s inferred from floating)