/ / bodyタグの背景色がその余白にあふれないようにする方法 - css、margin、background-color

bodyタグの背景色がマージンにこぼれるのを防ぐ方法 - css、margin、background-color

私は以下にリストされている非常に単純なCSSコードを書いています:

body {
background-color:#616161;
margin-left: 20%;
}

左側に20%の余白を指定したとしても、背景色はbodyタグの余白領域にも影響を与えます。

回答:

回答№1の場合は3

背景色を入れるためにdivを使う

<html>
<body>
<div class="background">
<p>This is some text</p>
</div>
</body>
</html>

次に、このCSSを使用して色と余白を割り当てます。必要な場所の幅と高さを取得するには、コードを微調整する必要があります。

html{
height:100%;
}
body{
height:100%;
margin-top:0px;
margin-left: 20%;
}
.background{
min-height:100%;
height:auto;
background-color:#616161;
width:100%;
}

またはミロが指摘したように:

html { background-color:#fff; }
body {
background-color:#616161;
margin:0% 0% 0% 20%;
}

回答№2の場合は0

このブラウザの動作に関するわかりやすい説明が見つかりました。 「body要素の背景プロパティはhtml要素(ビューポート)に伝播しますが、これは後者のbackgroundプロパティの計算値が透明の場合のみです。リンク)+(テストフィドル)。

ここでの最善の解決策は、追加の div と同じように user2067005 上記で示唆しています。
W3Cはお勧めします:

ただし、HTML文書の場合は、作成者がHTML要素ではなくBODY要素の背景を指定することをお勧めします。 ルート要素がHTMLである文書の場合"background-color"に "transparent"、 "background-image"に "none"の値を計算した "HTML"要素またはXHTMLの "html"要素。その代わりにユーザーエージェントはその背景プロパティの計算値を使用しなければならない。キャンバスの背景を描画するときは、要素の最初のHTML "BODY"要素またはXHTML "body"要素の子であり、その子要素の背景を描画してはいけません。ルート要素のためだけに描かれたリンク