logo标签列表

全局 CSS 重置 * { margin: 0; padding: 0; } 有哪些缺点？

cssxhtmlcross-browser
7

全局 CSS 重置 * { margin: 0; padding: 0; } 的缺点是什么？

人们为什么喜欢使用 Eric Meyer 的 CSS。

这是 Eric 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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

这似乎有点具体和繁重。我从来没有使用过像blockquote和caption这样的很多元素。

更新：Eric重新设置了58个元素的9个属性。这是否也会像人们谈论全局重置那样变慢。

使用这种方法的缺点是什么？

* { margin: 0; padding: 0; }
select { min-width:1.5em; }
1
复制：http://stackoverflow.com/questions/562713/is-it-wrong-to-use-when-reseting-margins-padding-in-css - Sampson
9个回答
12
问题在于有些元素需要设置外边距和/或内边距才能正确显示，但人们忘记将它们重置。此外，对于许多元素，您将设置自己的样式以覆盖重置，因此重置是多余的；您应该只需按照您想要的方式设置样式。
我经常看到的一个问题是列表。如果您盲目应用复位，列表项目的符号将出现在包含元素的外部，这总是困扰我：
    +--------------------+
    | Some paragraph,    |
    | with text.         |
    |                    |
   *| One                |
   *| Two                |
   *| Three              |
    +--------------------+
也许有些设计师是有意为之，但我认为我经常看到这种情况，是因为有人盲目应用了复位，而没有考虑列表项缩进会发生什么。如果您寻找这个问题，您会在各个地方看到它；几乎总是，在您看到它的站点上使用了CSS复位。有关如何正确格式化列表的更多信息，请参见Mozilla开发者中心上的一致的列表缩进。
另一个问题是在进行复位后，有时人们会忘记将外边距应用回某些晦涩的元素。例如，<dl>元素。它的默认样式并不好，但至少可以让您区分其中的<dt>和<dd>元素。如果应用了复位，就会失去这一点，最终导致所有内容挤在一起而没有区分。例如，Stack Overflow的复位就是这样做的，使得<dl>元素几乎无用：
术语
定义
术语
定义
Stack Overflow的重置（reset）也没有在<dl>元素上设置任何顶部或底部边距，只有在<p>下面设置了一个底部边距；因此，我必须添加额外的<br>以防止上述<dl>元素与此段落相碰撞。
如果您使用重置，请非常小心，确保所有HTML元素以合理的方式显示。并删除您的重置被后续添加的规则覆盖的部分；没有真正的理由重置<b>和<i>，然后稍后再应用font-weight和font-style，如果您将边缘重置为0，然后将其设置为2em，那么为什么不删除重置0？
悬挂标点通常被认为是一件好事，但我同意它的使用大多是偶然的;-) - Ludwig Weinzierl
是的，引号和连字符使用得当时，可以有意地使用并产生良好效果。对于项目符号列表的使用，我持矛盾态度；有时看起来不错，但在某些设计中，突出显示单独的点会削弱项目符号的强度，而且项目符号有时会感到迷失或与列表分离。此外，请注意，如果没有边距或填充，则子列表将不会缩进，因此您将失去呈现嵌套列表的能力（除非您添加ul ul规则或类似规则以仅为嵌套列表添加缩进）。 - Brian Campbell
@Brian Campbell，关于当边距/填充被重置为0时列表中的项目符号，我建议使用一个非常漂亮的CSS属性，即 ul { list-style-position: inside; }。 - Gras Double
5
艾瑞克·迈耶的CSS重置不仅仅是删除填充和边距，而是使默认样式在各个浏览器中保持一致。许多样式规则都反映了这一事实。我不知道他的重置中默认未包含哪些元素，但我可以说，您发布的特定重置确实包含了许多修订，以确保在各个浏览器上具有最大的兼容性。
至于速度，如果通过网站传输100个及以下级联样式表会对您的性能产生重大影响，那么您可能需要解决更深层次的问题。确保尽可能多的文件被缓存，并不要过分担心一些额外的CSS规则。
3

速度是一个问题，即使影响很小，使用全局样式表 (*) 会将属性应用到可能的每个元素，即使您没有使用其中一个或多个元素。

Eric 重置了 58 个元素的 9 个属性。这样做不会和全局重置一样慢吗？ - Jitendra Vyas
2

我认为使用一个非常强大的CSS重置是必要的，特别是当你在多个浏览器中运行你的网站时。我看不出有太多的缺点。

问题在于，有些时候不同的元素，例如p、h1、h2等，都受到行高、字体大小等的影响，所以只做padding:0和margin:0不能完全重置。

希望这能帮到您。

2

全局重置的缺点更多是基于您自己的个人设置。只要您标注出处，就可以编辑其他人的重置。

缺点： 很久以前我创建了自己的重置，但犯了一些错误，后来不得不回过头来删掉一些东西。 因此，如果您使用别人的重置，并且其中包含您不希望的某些内容，您可能会“失去功能”在一些您习惯的对象上。如果需要，可以通过删除有问题的重置来解决这个问题。

优点： 我已经使用重置工具工作了将近一年了，我非常喜欢它。我真的没有注意到任何性能问题，元素显示的方式也不会让我感到惊讶，而且我在构建新网站时不必像设置主体和HTML的边距/填充为0这样愚蠢的事情。

2
差异微小，但是"星号规则"需要逐个元素进行处理，应用（或在这种情况下删除）默认样式，所需时间更长。像Eric Meyer的重置样式可以有针对性地重置元素，因此处理时间略微减少。
1
将line-height设置为1并不利于易读性。即使在印刷领域，布局软件也会设置大约1.15的默认行高（行间距）。在Web上，由于经常出现较长的测量值（行长度），所以必须使用比1更大的行高（通常我从1.5开始，并经常增加到1.75）。排版原理有其存在的道理，那就是帮助阅读。将行高设置为1这种实心的打印术语只能在特殊情况下使用，例如非常大的标题。它不应该成为默认设置。
是的，人们“可以”在自己的样式中修改重置，但事实上，这个重置被视为许多人的圣杯，他们盲目地采用它并从未改变过来使用合理的排版原则。而这个网站就是问题的一个例子。眼睛需要一些垂直空间来便于从一行的末尾轻松地跟随到另一行的开头。当行高等于字体大小时，文本变得更难读。
0

对于浏览器而言，有一些默认的边距和填充，每个元素可能都不同（例如li和input可能不同），这取决于浏览器。 重置这些值将确保在所有浏览器中，所有元素的边距和填充都为0。

0

不要使用重置样式。

重置样式会给同行开发人员和未来的开发者带来麻烦。

当我添加h1标签时，我期望它有一些边距和填充。当我添加p标签时，我期望每个段落之间有一些间距。

当人们移除这些样式时，真的很让人恼火。我必须回头查看他们的重置样式，找出这个开发人员决定使用的数十亿个可怕的样式中的哪一个，然后很可能进行更改。

3
有许多合理的理由，使得人们希望使用重置。作为设计人员，对于我们来说，细节至关重要，P或H1标签上2或3像素额外的填充和边距可能会破坏设计。此外，重置有助于浏览器兼容性，在不同浏览器和不同机器之间覆盖差异。 - Dan Hanly
当我添加h1标签时，我期望它有一些边距和填充。什么？我从谷歌搜索结果中进入了这个页面，因为我添加了h1标签，但并没有预料到会出现任何不明显的边距。 - Denis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接