不需要的边距去除

Posted 2023-03-06

【中文标题】不需要的边距去除

【英文标题】：Unwanted margin removal

【发布时间】：2013-05-14 11:36:52

【问题描述】：

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

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

html：

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

</SECTION>

CSS：

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

【问题讨论】：

你的问题很难理解，你到底想要怎样的布局？

SO。用第一个答案编辑。

【参考方案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 元素都有 display:block;并标准化填充和边距。

you can read more about his work here

【讨论】：

如果 OP 想要 边距怎么办？

正在回答一个似乎已被修改的问题 - OP 表示他希望边距消失

【参考方案2】：

这是margin collapse的经典案例。如果为#Middle_Col #Article_1 元素添加边框，则黄色不再可见。

http://jsfiddle.net/XFs-s-r/10/

更改溢出属性（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

【讨论】：

这是一些有用的知识 - 我一直对导致此问题的原因以及如何纠正它有基本的了解，但从来没有完整的详细解释！谢谢你