inline-blockの隙間をなくす


ラベル inline-blockの隙間をなくす方法

ボタンを横に並べる時、CSSにinline-blockが便利なようですが、やってみると変な隙間ができます。
padding:0;margin:0;にしても隙間ができます。

BUTTON1
BUTTON2
BUTTON3
BUTTON4

解決方法

親要素にfont-size:0letter-spacingを設定し、子要素には実際の値を設定すればよいそうです。

BUTTON1
BUTTON2
BUTTON3
BUTTON4

BUTTON1
BUTTON2
BUTTON3
BUTTON4