inline-blockの隙間を無くす話
2010年8月くらいに、@neotagさんにアドバイスをいただきながら、色々試した（興味あれば、その時の記事も再掲載します）けど、上手いこと環境による違いを埋める事が出来ていなかったinline-blockの隙間を埋める話がちょっと前進しました。
2011年4月3日に、別のパターンを書きました。『inline-blockの隙間を無くす話 その後』
もうちょっと、きちんとまとめてから、改めて書きたいと思います（誰か書いてくれるとありがたいけど）が、とりあえず、色々試した結果を。
そもそも、inline-blockは有用なのか
色々意見はあると思うので、是非、お聞かせ願いたいトコロですし、今後、状況は変わっていくと思います。
とはいえ、2011年春の時点では、使えるシーンは結構ある思います。
- ブロック状にコンテンツを並べたい時とか、列ごとに親要素を用意したり、lastとかfirstとか付けたりとかしなくてもOK
- ボタンみたいなのとか作ったとき、text-alignとかvertical-alignとかで並べられる
- ボタンみたいなのとか作ったときなんかに、幅を固定しなくてもOKなので、使い回しがきく
- marginとか使える
などなど
今回試したこと
経緯
@terkelさんから、「YUIのGridがかっこいい」という話を聞いたので、チラ見してたら、@sigwygさんから、「こんなん（StackLayout by Campbell McGuiness）もあるよ」と教えていただき、さらに、@understandard、@tobotobotoから、「-0.4emでいけるんじゃ？」という情報が......
「@terkelさんが、まとめてくれるはずっ」と言ったものの、気になり始めたので、テストする事にした。
という感じです。
ちなみに、自分は、親要素でfont-sizeをリセットしたりしながら使ってたのですが、結局、ブラウザ間の誤差とか埋めきれてなくて「上手い方法ないかなー」と思ってたトコロ。
テスト
見た方が早いと思います。キャプったりしてなくてすみません......
結論
以下、理由は怪しいです！
- font-familyの影響を受ける（？）ので、親要素でfont-familyをmonospaceにして、子要素で戻す
- Courier Newである必要があるかどうかは試してないけど、あった方が無難かも
- letter-spacingとword-spacingを両方使う
- IE対策をYUIほど色々やる必要があるかどうかは、まだ試してません
- letter-spacingとword-spacingの値の適正値はまだ試してないけど、YUIのはイイ感じっぽい
残りは、@terkelさんに期待。
下記、一応、まとめてzipしたやつです。
早速、追記です（当日）。
さらに色々と試しましたが、下記のような感じでした。
- font-familyによって、差が出たりする（WindowsXP, Windows7, MacOSなど環境に左右される）
- （Macでしか見てませんが）font-family:monospaceだけだと、Safariだけfontが違うので、結果、必要な値が変わる → 'Courier New',monospaceにしましょう
word-spacingが無いと、Win Operaだけ隙間が出来る（Windows7 Opera11でチェック）ので、word-spacingが必要←これは間違いでは無いけど、どちらかというと、Webkit系でword-spacingが使えない事の方が問題だった- Courier Newで、font-size:16pxでletter-spacingもword-spacingもnormalの場合に出来る余白は10pxだったので、10/16=0.625という訳で、-0.625emすれば良いみたい
親要素のフォントサイズが19pxをこえると、Chromeは左向きに食い込みました（まあ、考えにくいケースだけど、フォントサイズ変更ボタンとか用意する場合は注意ですね）。
多分、「-0.625emくらい」って感じでOKなので、-0.65emで十分動作しそうです。
結果的に、stacklayout.cssの方式になった。
必要なトコだけ抜き出すと......
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
body,
.block {
font-family: sans-serif;
}
.blocks {
font-family: 'Courier New',monospace;
letter-spacing: -0.65em;
word-spacing: -0.65em;
}
.block {
/* ↓ Firefox2対策なので、無視OKなら不要 */
display: -moz-inline-box;
display: inline-block;
letter-spacing: normal;
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>
※ ↑ リセットしてる前提です。
こんな感じでしょうか？ たぶん、vertical-align:topは入れといた方が便利ですが。