便利なdisplay:inline-block;

もう既にdisplay:inline-blockの効かないブラウザは蹴ってもいいんじゃないかなぁ。
と思ったりしてるのですが。

こいつちょっとだけ癖が。。。
それは横並びにしたときに隙間ができる。

なのでその解決方をメモ。

【1】HTMLのソースの隙間を埋める

よくimgタグのみで並べるとソースコードの隙間のせいで表示にも隙間があく、という現象があったあれと同じです。

<img>
<img>
<img>

↑じゃなくて↓にする感じ

<img><img><img>

【2】font-size:0

まえに一度chromeだったかのバグでfloat:leftした際に0.16…pxくらい隙間が空いてメニューにカラム落ちが発生する現象が起きてたときの解消の仕方と同じ、だったような気がする。
inline-blockしたい要素の「親」をfont-size:0px;にして、当の要素でfont-size:12px;なりで戻す、と言う方法。

<div style="font-size:0">
<p style="display:inline-block;font-size:16px;">menu01</p>
<p style="display:inline-block;font-size:16px;">menu02</p>
<p style="display:inline-block;font-size:16px;">menu03</p>
</div>

【3】letter-spacing: -0.4em;

これはあんまり好きじゃないけど、埋める。うん。それだけ。

<div style="letter-spacing: -0.4em;">
<p style="display:inline-block;letter-spacing: normal;">menu01</p>
<p style="display:inline-block;letter-spacing: normal;">menu02</p>
<p style="display:inline-block;letter-spacing: normal;">menu03</p>
</div>

codepen

See the Pen aNrXEZ by ziyudom (@ziyudom) on CodePen.