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

回答を検索しましたが、どこにも見つかりませんでした。私の質問は合理的にシンプルです：私は私の体の背景色を持って、大きなマージン、今私は別の背景色内部の余白が欲しい。CSS：マージン内の背景色のみ

CSSでどのように行うのですか？

2012-04-06 stackunderflow

はあなたが**だけ** margin_ _inside背景を持っている：前：pseudoclasses（または後）。ボックスモデル：http://www.w3.org/TR/CSS2/box.html – c69

余白の代わりに詰め物を使用すると、要素の背景色を指定します – bevacqua

あなたのマージンが体に設定されている場合、htmlタグの背景色を設定すると、マージン領域

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

http://jsfiddle.net/m3zzb/

またはdmackerman提案などに色をする必要があり、マージンを0に設定しますが、マージンを設定したいサイズのボーダーを設定して、ボーダーカラーを設定してください。

出典

2012-04-06 20:24:22

これは完全に – stackunderflow

で動作し、同じボディを 'body'に入れて –

のhtmlタグの背景色を白以外の色にすると、ページが最初に読み込まれるときに色がかかってしまいます体の色が蹴られる前にページ全体が1秒間表示されるので、奇妙に見えます。 – frosty

これはボックスモデルには当てはまりません。しかし、css3のボーダーイメージ、または一般的なCSSのボーダーカラーの回避策を使用することができます。

ただし、リセットに問題があるかどうかは不明です。ブラウザによっては、htmlに余白を設定するものもあります。 Eric MeyersのCSSリセットを参照してください！

出典

2012-04-06 20:21:40 worenga

境界線を使用する代わりに、境界線を使用できますか？とにかく<div>でこれを行う必要があります。

これは何か？ enter image description here

http://jsfiddle.net/GBTHv/

出典

2012-04-06 20:23:16 dmackerman

こんにちは、私は同様のことが行われますが、境界内の背景色は余白内のテキストの下端までしか伸びません。それが理にかなっていれば、私はマージンエリア全体に入る必要があります。 – stackunderflow

@ user1318194 - 私はあなたが何かマージンを意味するのか混乱していると思います。マージンは要素の周りの領域なので、上のような境界線はまさにマージンです。 –

ええ、マージンはパーセントで設定することはできますが、ボーダーでは設定できません。だから、左右に1％のマージンが必要ならば、ボーダーでそれをすることはできません。 – frosty

私は似たような必要に応じて、使用して思い付いた：

#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-04 18:08:51

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

答えて

関連する問題