53

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

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

4

5 に答える 5

54

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

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

http://jsfiddle.net/m3zzb/

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

于 2012-04-06T20:24:22.163 に答える
17

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

このようなもの?ここに画像の説明を入力

http://jsfiddle.net/GBTHv/

于 2012-04-06T20:23:16.183 に答える
7

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

于 2014-10-04T18:08:51.470 に答える
1

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

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

html{margin:0;padding:0;}
于 2012-04-06T20:21:40.043 に答える