具有“内置”边距的 HTML 元素答案

【问题标题】：HTML elements with "built-in" margins具有“内置”边距的 HTML 元素
【发布时间】：2010-07-26 23:18:12
【问题描述】：

在处理我的第一个项目时，它完全使用 css 进行布局，而不是像我最习惯和习惯的表格那样，我遇到了一个奇怪的问题。显然有些元素内置了边距。换句话说，如果您设置了“margin-top: 0px”，那么该元素的呈现方式与不设置的情况不同。直到我在 IE7 中测试显然不尊重此功能的网站时，我才真正注意到这个问题。

到目前为止，我注意到 h* 元素和 ul 元素都有这个。有谁知道我在哪里可以找到其他在线元素？我尝试在 W3C 周围搜索，但运气不佳。我确信它就在某个地方，因为所有现代浏览器都正确实现了这一点。我只是不知道在哪里可以找到这些信息。

【问题讨论】：

标签： html css

【解决方案1】：

http://meyerweb.com/eric/tools/css/reset/

这是一个相当著名的 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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

【讨论】：

这几乎是每一个常见的元素，缺少一些没有边框/填充看起来很傻的表单字段。其中大多数在任何浏览器中都没有默认边距。
@bobince - 信任，但要验证 :)

【解决方案2】：

您可能想查看 YUI 的reset.css

http://developer.yahoo.com/yui/reset/

【讨论】：

【解决方案3】：

浏览器之间可能存在细微差别，但这一点，从 CSS 2.1 规范来看一定非常接近。

http://www.w3.org/TR/CSS21/sample.html

【讨论】：

谢谢。其他答案也非常有帮助，但这正是我想要的。
注意电子邮件客户端中divs 和paragraphs 的处理...这些差别很大。
form 在某些浏览器中的处理方式也不一致，并且在旧版本的 Opera 中，body 曾经使用 padding 而不是 margin。

【解决方案4】：

我结合使用 reset.css (http://meyerweb.com/eric/tools/css/reset/) 和 ClearFix(http://www.webtoolkit.info/css-clearfix.html) 来处理包含浮动元素的行为不端的 div。

【讨论】：