html - CSS：背景-余白の内側のみの色

Question

答えを探しましたが、どこにも見つかりませんでした。私の質問はかなり単純です。体の背景色があり、次に大きな余白があり、余白の内側に別の背景色が必要です。

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

Answer 1

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

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

http://jsfiddle.net/m3zzb/

またはdmackermanの提案として、マージンを0に設定しますが、マージンを希望するサイズの境界線を設定し、境界線の色を設定します

Answer 2

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

このようなもの？

http://jsfiddle.net/GBTHv/

Answer 3

似たようなものが必要だったので、: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

Answer 4

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

ただし、リセットで問題が発生する可能性があるかどうかはわかりません。一部のブラウザは、htmlにもマージンを設定します。詳細については、Eric MeyersResetCSSを参照してください。

html{margin:0;padding:0;}