inline-blockの隙間を無くす話 その後
一つ前の記事（『inline-blockの隙間を無くす話』）「font-familyいじくるの面倒だよね」とか言っていたら、@understandさんが、解決して下さった！ 感謝！ 『display: inline-block を使う（修正版）』
若干トリッキーな手法だけど、font-familyをいじくるよりずっと実用的だし、font-familyいじくるよりはトリッキーじゃない（？）気がします。 ただ、「なんでか」が判明していないので、有識者の方、教えてください！
変更のポイントは下記の通りです。
- letter-spacingは設定不要
- word-spacingは分かりやすく-1em
- 親要素にdisplay:table（Webkit対策とのこと）
（Webkitでword-spacingがちゃんと動けば、「display:table」要らないのになー）
ソースは以下のような感じです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
.blocks {
display: table;
width: 100%;
word-spacing: -1em;
}
.block {
/* ↓ Firefox2対策なので、無視OKなら不要 */
display: -moz-inline-box;
display: inline-block;
word-spacing: normal;
vertical-align: top;
/zoom: 1;
/display: inline;
}
/* ↓ Firefox2対策なので、無視OKなら不要 */
.block-item {
display: block;
}
</style>
</head>
<body>
<div class="blocks">
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<!-- /.blocks --></div>
</body>
</html>
※ ↑ リセットしてる前提です。