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

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をpadding-boxに指定すると、背景はborderの背後には描画されません。

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

background-clipの解説

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

.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+から利用可能です。不明な点があればパソコン倶楽部りんごでも質問を受け付けますよー。