今回はネガティブマージンの便利な使い方について紹介します。

※ネガティブマージンとは、CSSで、マイナス値が与えられたmarginプロパティのことを言います。

例1）3カラムのボックスを均等に並べる

HTML

CSS

[css]
#container {
width: 620px;
border: solid 1px #000;/*装飾用*/
overflow: hidden;
}

#container-inner {
margin: 0 -10px 0 0;
/zoom: 1;/* for IE6,7 */
}

#container-inner div {
width: 200px;
margin: 0 10px 0 0;
float: left;
background: #FFCC66;/*装飾用*/
}
[/css]

小さいボックスに右マージン10pxを指定し、ボックスごとの隙間を確保します。
そして、#container-innerにて、右マージン-10pxを指定し相殺します。

例2）横並びリストを均等に並べる

例1と同じ原理を使えば、リストタグで組んだブロック要素も均等に並べることができます。

HTML

CSS

[css]
#list-container {
width: 620px;
margin: 50px 0 0 0;
border: solid 1px #000;
overflow: hidden;
}

#list-container ul {
margin: -10px -10px 0 0;
padding: 0;
/zoom: 1;/* for IE6,7 */
}

#list-container ul li {
width: 200px;
margin: 10px 10px 0 0;
padding: 30px 0;
float: left;
list-style: none;
background: #FFCCCC;/*装飾用*/
text-align: center;
}
[/css]

このように、余計なclassを振らずにレイアウトできるようになると、htmlソースがクリーンに保てるだけでなく、ボックス数が増減した際にもう一度classを振る必要がなくなるので便利です。