ウィンドウの全幅にマージンを持つボックス

私は単純なレイアウトに問題があります。スクロールバーが表示されますので、残念ながら、この方法は間違っているウィンドウの全幅にマージンを持つボックス

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 
#black{ 
 
    background: black; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#grey{ 
 
    background: grey; 
 
    width: 100%; 
 
    margin: 2em; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

：ように見える

私のコード：それは次のようになります。私は応答する解決策が必要です。

出典

2016-07-02 docze

margin、あなたは今後の参考のために見てみるたいかもしれません必要があります – dippas

だけ#greyに幅を設定し、右マージン削除しないでください：#grey以来

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 
#black{ 
 
    background: black; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#grey{ 
 
    background: grey; 
 
    margin: 2em; 
 
    margin-right:0; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

はdiv要素で、デフォルトでブロック要素である、それがいっぱいになります利用可能なスペース。

出典

2016-07-02 14:08:02

は、実際に受け入れられた答えは、崩壊（pに

トップ、デフォルトではそれらを有するブロックの下marginsが時々結合さにより存在しているcollapsing marginsをカウントで服用されていない与えられた「ちょっと」間違っています）を単一のmarginに入力します。そのサイズは、マージンのうち最大のものがになります。これは、マージンの崩壊と呼ばれる動作です。

だから、paddingと私は説明してあなたの質問に答えました

body, 
 
p { 
 
    margin: 0; 
 
    color: white; 
 
} 
 
#black { 
 
    background: black; 
 
    width: 100% 
 
} 
 
#grey { 
 
    background: grey; 
 
    padding: 2em 0 2em 2em; 
 
    margin: 2em 0 0 2em; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-07-02 14:55:24 dippas

ウィンドウの全幅にマージンを持つボックス

答えて

関連する問題