不需要的边缘去除

Question

为什么会出现橙色和黄色线条？我认为我的橙色儿童元素必须覆盖黄色父元素，蓝色儿童元素必须覆盖橙色父元素。

在jsfiddle中看看这个code。下面的代码不完整。

HTML：

<SECTION ID="Middle_Col"> 
    <ARTICLE ID="Article_1"> 
    </ARTICLE> 

</SECTION> 

CSS：

BODY { 
width: 1024px; 
background-color: grey; 
} 

Answer 1

解决你想使用一个CSS复位这个问题，我是能够复制并使用流行的埃里克·迈尔的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;并标准化填充和边距。

you can read more about his work here

Answer 2

这是保证金崩溃的经典案例。如果向#Middle_Col #Article_1元素添加边框，则黄色不再可见。

http://jsfiddle.net/XFSSR/10/

改变overflow属性（overflow: hidden等），也可以抑制保证金崩溃。

如果没有边框，填充，内嵌的内容，或间隙 分离块的边距，其第一 子块的边距，或无边框，填充，内嵌的内容，高度， 最小高度或最大高度，以将块 的边缘底部与其最后一个孩子的边缘底部分开，然后这些边距折叠。 折叠的边距最终在父级之外。

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

这里有一些非常好的图表的文章：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html