# inline-blockの隙間を、IEでもChromeでもOperaでもfirefoxでも消す。

- リンク: https://torounit.com/blog/inline-block%e3%81%ae%e9%9a%99%e9%96%93%e3%82%92%e3%80%81ie%e3%81%a7%e3%82%82chrome%e3%81%a7%e3%82%82opera%e3%81%a7%e3%82%82firefox%e3%81%a7%e3%82%82%e6%b6%88%e3%81%99%e3%80%82/
- 公開日: 2012-10-23T10:00:20+09:00
- 作成者: Toro\_Unit

この間コーディングでfloatとheightでやるのも嫌だなぁと思い、inline-blockを活用した
のですが、隙間を消すのに意外に苦労したので、メモ。
 letter-spacingで隙間を消すの
が有名だと思いますが、それだとOperaでチェックした時に隙間が消えない！という問題に
先日の案件で直面しました。

[html]
 <div class="columns"> <div class="column"></div> <div class="column"></div
> <div class="column"></div> </div> [/html]

[css]
 .columns { letter-spacing: -0.4em; word-spacing: -1em;

}

.column {
 display: inline-block; letter-spacing: normal; word-spacing: normal; /
display: inline; /zoom: 1; } [/css]

word-spacingを指定すると、Operaでも隙間が消えるみたいです。ただ、Webkit系のブラウザ
はword-spacingだと効かないみたいです。
 inline-blockって意外にブラウザ間で実装が
違うみたいですね。ie8以上案件ならdisplay:table-cellを使う方が無難かも知れないです
ね。