【CSS3】[display:table-cell;]に[margin]を指定したい場合の処理。

Ads by Google

CSS3 から使えるようになった新しいプロパティ display:table;display:table-cell; は、これまで[float]を使って組んでいたレイアウトを、より直感的に、より簡単に実現できるので大変便利です。

しかし display:table-cell; で指定したボックスには[margin]が効かないというデメリットもあります。

ここで紹介するのは、[border-collapse]と[border-spacing]を使ってセルの間隔を調整する方法です。

基本的に display:table; で指定した要素は、所謂「table」として扱われるので、当然[border-collapse]と[border-spacing]も効くようになります。

[border-collapse]はセルのボーダーを重ねるか間隔を空けるかを、[border-spacing]はどれぐらいの間隔を空けるのかを設定できます。
単位は「px」や「em」などで指定できて、display:table; を指定した要素に対して追加します。

セル同士の間隔を空けない場合

.table {
	display:table;
	margin:0 auto;
	border-collapse:collapse;
}

セル同士の間隔を空けたくない場合、上記のように[border-collapse:collapse;]を指定します。

セル同士の間隔を空ける場合

.table {
	display:table;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:2px 0;
}

セル同士の間隔を空ける場合は border-collapse:separate; を指定します。

さらに、上記の例では border-spacing:2px 0; として、セルの左右に 2px づつの間隔を空けるように指定しています。

最近のウェブデザインのトレンドで[display:table;]は使いどころが多くなってきています。
ぜひお試しください。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google