先日、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の背後にも描画されます。red;background:yellow;padding:1em;display:table-cell;background-clipの指定なしだとborder-box指定になるbackground-clipをpadding-boxに指定すると、背景はborderの背後には描画されません。red;background:yellow;padding:1em;display:table-cell;background-clip:padding-box;background-clipをpadding-boxに指定background-clipの解説ということで、今回の方法では、透明のborderで隙間を作る為に、background-clipをpadding-boxに指定する必要がある訳です。しないと、透明にしたborderの部分に背景が描画されてしまいます。以下の例をご覧下さい。sample1borderが不透明なら、table-cellの間に隙間があるように見えますsample2borderを半透明にすると、背景がborderの背後にも描画されているのがわかります。}いかがでしょう?background-clipは、存在は知っていましたが、私も、これまで使用した事がありませんでした。IE9+から利用可能です。不明な点があればパソコン倶楽部りんごでも質問を受け付けますよー。0;とかもいかがでしょうか。21:06border-spacingも有効な方法ですね!気づきませんでした。均等に隙間をあけるなら十分に使えそうです。ありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。designerのKSKです。このサイトのコンテンツはhtml5やCSS3の情報や実装で構成しているので、これらをサポートしているブラウザ(FirefoxやChrome)で閲覧することを推奨します。WordPress.。