html - 不需要的边距去除

Question

为什么会有橙色和黄色的线？我认为我的橙色子元素必须覆盖黄色父元素，蓝色子元素必须覆盖橙色父元素。

在 jsfiddle 中查看这段代码。下面的代码不完整。

HTML：

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

</SECTION>

CSS：

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

score 0 · Accepted Answer

为了解决这个问题，您想使用 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; 并标准化填充和边距。

你可以在这里阅读更多关于他的作品