重置 CSS - 将填充和边距设置为 0？答案

【问题标题】：Reset CSS - Set padding and margin to 0?重置 CSS - 将填充和边距设置为 0？
【发布时间】：2012-01-24 07:42:56
【问题描述】：

查看YUI 2: Reset CSS，他们在多个元素上设置了margin:0 和padding:0。我不在乎页面上的 IE6 或 IE7。我仍然需要为每个元素设置margin:0 吗？

div（无）
ol（是）
ul（是）
里（无）
表单（仅限 IE6、IE7）
输入（无）
textarea（无）

我还需要为每个元素设置padding:0 吗？

身体（无）
div（无）
ul（是）
ol（是）
里（无）
表格（无）
文本区域（是）
p（无）

我还需要为图片设置border:0吗？

A：仅适用于链接图像

还有什么推荐的吗？

【问题讨论】：

我不明白你的问题。你在使用重置 CSS 吗？这个 CSS 是否将 margin: 0 和 padding: 0 设置为所有元素（我想是的）？如果是这样，你为什么要问你是否必须重新做？
抱歉不清楚...我没有使用任何 CSS 重置代码，我想我可能会在设置元素样式时设置样式。所以问题真的是：我是否需要设置 maring:0 以使元素在每个现代浏览器中都兼容（id 没有 IE 8，所以我无法测试）。
这样做所需的时间并不值得。

标签： css reset

【解决方案1】：

您可以在这个网站上查找 IE 的内置样式表：http://www.iecss.com/

它有 Firefox、WebKit 和 Opera 样式的链接。您可以交叉参考这些来做出决定。

【讨论】：

【解决方案2】：

这取决于您是否希望页面上元素的边距和内边距为特定值。如果没关系，那么请务必将其保留为浏览器默认值 - 只是不要依赖它，因为无法保证世界上所有浏览器都会使用您的测试浏览器所做的默认值。我建议您自定义 normalize.css 并在您的代码中使用它。如果您为不得不加载另一个样式表或自己的样式表臃肿而烦恼，您可以随时compress the CSS 并将其粘贴到文件顶部的一行中。

【讨论】：

【解决方案3】：

这与浏览器元素兼容性无关。所有标准元素在每个浏览器中都兼容（即按原样显示）。

问题在于，通常浏览器会以不同的方式为某些元素应用默认样式属性。例如，IE 和 Firefox 为块元素应用不同的默认边距，为标题（h1、h2、...）应用不同的字体大小等...

CSS 重置样式表通过扁平化所有样式帮助您消除所有这些不一致，这些样式在不同浏览器中可能不同。

你可以在这里阅读一篇文章：

http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

【讨论】：

【解决方案4】：

我总是使用这个：

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;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

【讨论】：