オレンジと黄色の線があるのはなぜですか? オレンジ色の子要素は黄色の親要素をカバーし、青色の子要素はオレンジ色の親要素をカバーする必要があると思います。
jsfiddleでこのコードを見てください。以下のコードは完全ではありません。
HTML:
<SECTION ID="Middle_Col">
<ARTICLE ID="Article_1">
</ARTICLE>
</SECTION>
CSS:
BODY {
width: 1024px;
background-color: grey;
}
これはマージン崩壊の典型的なケースです。要素に境界線を追加すると#Middle_Col #Article_1、黄色が見えなくなります。
オーバーフロー プロパティ (overflow: hiddenなど) を変更すると、マージンの崩壊も抑制できます。
ブロックの margin-top と最初の子ブロックの margin-top を分離する境界線、パディング、インライン コンテンツ、またはクリアランスがない場合、または境界線、パディング、インライン コンテンツ、高さ、最小高さ、または最大値がない場合ブロックの margin-bottom をその最後の子の margin-bottom と分離するための高さ。折りたたまれたマージンは、親の外に出ます。
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
これは、いくつかの非常に優れた図を含む記事です: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
CSSリセットを利用したいこの問題を解決するために、以下の人気のあるErik MeyerのCSSリセットを使用して、問題を再現して解決することができました
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
この競合は、新しい html5 要素の一部が、特に含まれている要素のマージンの不一致と相互作用するときに不適切な動作をすることに関係しています。ここで erik は、すべての html 5 要素に display:block; があることを確認します。パディングとマージンを標準化します。