web-dev-qa-db-ja.com

CSS：マージン内のみの背景色

回答を検索しましたが、どこにも見つかりませんでした。私の質問はかなり簡単です：私は私の体の背景色、そして大きなマージンを持っています、そして今、私は異なる背景色が欲しいですinsideマージン。

CSSでこれを行うにはどうすればよいですか？

htmlcssmarginbackground-color
42
user1318194

本文にマージンが設定されている場合、htmlタグの背景色を設定すると、マージン領域が色付けされます。

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

または、dmackermanの提案として、マージンを0に設定しますが、マージンにしたいサイズの境界線とborder-colorを設定します

45
Erik Funkenbusch

マージンを使用する代わりに、ボーダーを使用できますか？とにかく<div>でこれを行う必要があります。

このようなもの？enter image description here

http://jsfiddle.net/GBTHv/

14
dmackerman

同様の何かが必要だったので、：before（または：after）擬似クラスを使用するようになりました：

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle

4
rlv-dan

それはボックスモデルでは不可能です。ただし、css3のborder-image、または一般的なcssのborder-colorで回避策を使用できます。

ただし、リセットに問題があるかどうかはわかりません。一部のブラウザーでは、マージンもhtmlに設定されています。詳細については、Eric Meyers Reset CSSをご覧ください！

html{margin:0;padding:0;}
0
worenga