inline-blockをちょうどいい感じにブロックの中に並べるcssと注意点

http://jsdo.it/kanonji/1Hm4

こんな感じで、縦横100pxの正方形を、縦横10px空けながらinline-blockで配置したい場合のcssです。ネガティブマージンを使うんですが、ちょっと注意点もあったので、やり方とその注意点をメモしておきます。

やり方

<h2>Target</h2>
<div id="target">
<ul>
    <li></li
    ><li></li
    ><li></li
    ><li></li
    ><li></li
    ><li></li
    ><li></li
    ><li></li
    ><li></li>
</ul>
</div>

htmlはこんな感じ。配置したいブロックをdiv要素で作って、そこに配置するul/li要素を入れます。inline-blockのマークアップは、改行やスペースを入れるとテキストノードが入る事で、cssでコントロールできない隙間が出来ちゃいます。なので、ちょっと変なマークアップになってます。詳しくはinline-blockで横に並べた時に入る隙間をJavaScriptでなんとかする - kanonjiの日記

div{
    width:320px;
    height:320px;
}
ul, li{
    margin:0;
    padding:0;
    list-style: none;
}
li{
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: bottom;
}
#target{
    padding: 10px;
    background: #000;
}
#target ul{
    margin-left: -10px;
    margin-bottom: -10px;
}
#target li{
    margin-left: 10px;
    margin-bottom: 10px;
    background: #c22;
}

ネガティブマージン

縦横100pxのli要素をinline-blockにしておき、10pxの間隔を空ける為に左と下にマージンを設定します。入れ物であるdivには10pxのpaddingがあるので、左へのマージンと合わせて20px空いてしまいます。そこでul要素の左側に-10pxのネガティブマージンを設定して、うまく収まるようにしてます。下方向も同様です。

vertical-align: bottom;

あと、li要素がinline-blockになる事で、inline要素の特性も持ちます。vertical-align: bottom;を設定しないと、下方向に余計な隙間が出来てしまいます。詳しくはimg要素をブロック要素でラップした際の隙間 / margin:0 auto;でのセンタリングずれ - kanonjiの日記を見てください。img要素を〜となってますが、img要素こそが元からinline-blockな要素なので、同様の現象と解決策になります。

注意点

右マージンでなく左マージン

li要素のマージンとul要素のネガティブマージンは、右でなく左じゃないとダメです。右側に設定したul要素を、ページの右端に配置すると、li要素のマージンの分ページが大きくなってしまいます。

実は最初は右側でやっていました。ブログの右サイドバーに、このサンプルと似たようなバナーを張る領域を作っていて、問題なくレイアウトできていました。そのブログはページの横幅を980pxで作っていて、980pxよりブラウザサイズが小さい場合横スクロールバーが出る作りです。li要素の右マージンである10pxだけ、横スクロールバーが長くなってしまい、body要素に設定した背景が、その10px分には表示されないといった問題がでました。

左側にマージンを設定していて、左端に配置した場合、試してはいないですが恐らく、左側にはみ出す場合はウィンドウ外に隠れる事になると思います。もしかしたら、左端に配置するならマージンは右側にしないとかも知れません。

上マージンでなく下マージン

http://jsdo.it/kanonji/1Hm4

ちょっと分かりにくいですが、赤がdiv要素、青がul要素、黒がli要素です。このcssの目的は黒のli要素を赤のdiv要素にきれいに収める事が目的です。ちょっと理由は良く分からないですが、上マージンを使ったBadの方は、うまく収まってません。
ちなみに青がずれているのはネガティブマージンが理由です。むしろ青がずれる事で、黒が赤枠にうまく収まっています。