HTML（？！）：CSS：境界線を追加する背景色を変更する
<div> <p></p> </div>
CSS：
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
デモ：http://www.jsfiddle.net/Xy8QF/4/
なぜ上記の面積があります黄色の段落の緑、それに白い部分がありますか？
btw私はすでにこれを理解しましたが、とにかく投稿すると思いました。この場合、外側の要素（あればマージンが崩壊しません
:)
の更新を検討DIV）には、パディングまたは境界があります。
これは、の2つのブロック要素の余白（デフォルト）はCSS 2.1 8.3.1に従って折りたたまれます。つまり、余白はbody要素に「持ち越されます」。このdemoは、上記の標準にリストされている例外（非noneボーダーとともに）の1つである絶対配置された要素では起こらないことを示しています。
正解：.... –
これは<p>が同封の<div>の底に正しくあるからです。 <div>の高さを拘束するものは何もないので、レンダリングは<p>の底部に収まるだけのスペースを与えます。すべての明示的な高さ> 50ピクセルが下を表示します。
よろしくお願いします。ボックスは垂直に拡張されますが、水平には拡張されません。また、パディングはボックスの内側にスペースを置くので、pは境界に対して右に押し上げることができません。例えばCSSボックスモデル上に読む
、ここに： http://www.w3schools.com/css/css_boxmodel.asp 、ここで：あなたはそれを置くとして、黄色の段落の上http://www.w3.org/TR/CSS21/box.html
これはどうやって説明しますか：http://www.jsfiddle.net/Xy8QF/25/？'：）' –
まったく同じです。さて、divには下の境界線があるので、自由に展開できるのはTOPです。 –
エリア、実際にはそれより上ではありません。緑色のdivには黄色の段落が含まれています。黄色の段落には70pxの余白があり、そのコンテナの緑色の端から離れています。黄色の段落には高さが設定されているため、下端の緑色から黄色が押し出されることはありません。
これはフリーキン '_weird_です！ – Kyle
それは、制約解決の問題が委員会によって指定されたときに起こることです。 –
ああ、私は数ヶ月間この頭の中で私の頭を壊してきた！ 'h1'が' h1'のマージンによってウェブサイトのコンテンツエリア全体をプッシュダウンし、コンテンツエリアとヘッダー/メニューの間にギャップを作り出すと、本当に私を悩まします。 – mingos