table-cell はmarginが無効。それでも簡単に隙間を作る方法

先日、table-cellはmarginが無効。でも隙間を作る方法をUPしましたが、もっと、直感的で、より分かり易い方法を考えました。

table-cell-with-gutter2
DEMO

先日の方法はbackground-colorの代わりにbox-shadowで背景を見せるアイデアでしたが、これだと以下の点で使いにくい欠点がありました。

  • box-shadowによる背景色の見せ方が、直感的ではなく分かりにくい
  • paddingでcontentをズラしているのも、直感的ではない
  • table-cellにした各要素、およびその親要素のwidthが相対幅のケースでは使えない(固定幅ならOK)

透明のborderで隙間をあける

という訳で、今回は透明のborderで隙間をあける方法です。これなら背景は通常通りのbackground-colorやbackground-imageが使えます。paddingもトリッキーな指定は不要です。

background-clipの指定が必要

ただし、今回の方法は、background-clipというプロパティの指定が必要です。このプロパティは、要素の背景の描画の範囲を決めることが出来ます。以下の例をご覧下さい。

background-clipの指定なしだと、初期設定のborder-box指定になり、背景はborderの背後にも描画されます。

border:10px dotted red;
background:yellow;
padding:1em;
display:table-cell;
background-clipの指定なしだとborder-box指定になる

background-clipをpadding-boxに指定すると、背景はborderの背後には描画されません。

border:10px dotted red;
background:yellow;
padding:1em;
display:table-cell;
background-clip:padding-box;
background-clipをpadding-boxに指定

background-clipの解説

ということで、今回の方法では、透明のborderで隙間を作る為に、background-clipをpadding-boxに指定する必要がある訳です。そうしないと、透明にしたborderの部分に背景が描画されてしまいます。以下の例をご覧下さい。

sample1
borderが不透明なら、table-cellの間に隙間があるように見えます
sample2
borderを半透明にすると、背景がborderの背後にも描画されているのがわかります。
sample3
borderが透明になると、table-cellの間に隙間は開きません
sample4
borderが透明でも、background-clip:padding-box;を指定すると、隙間に見えます
.samples {
display:table;
margin: 1em 0;
width: 100%;
}
.samples > div {
background:yellow;
padding:0.5em;
display:table-cell;
width:25%;
border:10px solid #000;
}
.samples .sample1 { border-color:rgba(0,0,0,1); }
.samples .sample2 { border-color:rgba(0,0,0,0.5); }
.samples .sample3,
.samples .sample4 { border-color:rgba(0,0,0,0); }
.samples .sample4 { background-clip:padding-box; }

いかがでしょう?background-clipは、存在は知っていましたが、私も、これまで使用した事がありませんでした。IE9+から利用可能です。不明な点があればパソコン倶楽部りんごでも質問を受け付けますよー。

カテゴリー: css, css3 タグ: , , , パーマリンク

シェア

3 Responses to table-cell はmarginが無効。それでも簡単に隙間を作る方法

  1. ピンバック: グローバルナビの実装に便利!CSSプロパティdisplay: table-cellを使おう

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください