この間コーディングで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を使う方が無難かも知れないですね。