CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法

CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法

以前にtable-cellを使ってfloatを使わずに要素を横に並べる方法をご紹介しました。

この方法便利なんですが、marginを使って隙間を空けることができないんですよね。

というわけで、margin以外の方法で隙間を作る方法をご紹介します。

隙間を空ける方法

その方法はこちらの記事で紹介されていました。

ソースはこちら。

<div class="frame">
  <div class="box"><a href="#">item 1</a></div>
  <div class="box"><a href="#">item 2</a></div>
  <div class="box"><a href="#">item 3</a></div>
  <div class="box"><a href="#">item 4</a></div>
</div>
.frame {
  border-collapse: separate;
  border-spacing: 3px 0;
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  vertical-align: middle;
}

display: table;と一緒にborder-collapse: separate;border-spacingを書きます。数値は好きなように書き換えてください。

marginやpaddingと同じだと思ってたら最初の数字が横方向、あとの数字が縦方向でした。横に並んだ要素の隙間を空けるためには最初の数字をいじる必要があるのでご注意ください。

▼僕はソーシャルボタンでこの手法を使っています。このように隙間が空かなかったものが、隙間が空くようになりました。
隙間を空ける前と空けた後の比較

最後に

これでtable-cellがより扱いやすくなりました。

以前に紹介したtable-cellを使った方法と組み合わせてお使いください。

キーワード
WEBデザイン