Question

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

在jsfiddle中查看此code。以下代码未满。

HTML：

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

</SECTION>

CSS：

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

Answer 1

要解决这个问题，你想利用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元素都显示：block;并标准化填充和边距。

you can read more about his work here

Answer 2

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

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

更改溢出属性（overflow: hidden等）也可以抑制边距崩溃。

如果没有边框，填充，内联内容或间隙将块的边缘顶部与其第一个边缘顶部分开子块，或没有边框，填充，内联内容，高度， min-height或max-height分隔块的边距底部在最后一个孩子的边缘底部，那些边缘崩溃了。折叠的保证金最终在父母之外。

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

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

不需要的保证金清除

2 个答案: