为什么会有橙色和黄色的线条？我认为我的橙色子元素必须覆盖黄色父元素，蓝色子元素必须覆盖橙色父元素。
在 jsfiddle 中查看 code。下面的代码不完整。
HTML：
<SECTION ID="Middle_Col">
<ARTICLE ID="Article_1">
</ARTICLE>
</SECTION>
CSS：
BODY {
width: 1024px;
background-color: grey;
}
【问题讨论】：
为了解决这个问题，您想使用 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;并标准化填充和边距。
【讨论】：
这是margin collapse的经典案例。如果为#Middle_Col #Article_1 元素添加边框，则黄色不再可见。
更改溢出属性（overflow: hidden 等）也可以抑制边距折叠。
如果没有边框、内边距、内联内容或间隙 将块的 margin-top 与其第一个块的 margin-top 分开 子块，或无边框、内边距、内联内容、高度、 min-height 或 max-height 用于分隔块的边距底部 与最后一个孩子的 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
【讨论】：