css - margin 和 padding 是所有浏览器中最不平衡的东西吗？

Question

虽然有些人使用这个重置。 * { margin :0； 填充:0；

是否每个元素在每个浏览器默认样式表中都有默认边距和填充(但不同)？

虽然 eric meyer 收集了一些最常用的选择器并将其提供给所有人

{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

那些元素有不同类型的字体大小吗？不同的基线，不同的背景、轮廓和边框？

如果我们保留通用选择器的缺点。

这是

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

比这更好

* {
  margin: 0;
  padding: 0;
}

Answer 1

您可以在此处找到所有默认样式:CSS2.1 User Agent Style Sheet Defaults .

如果您仔细研究该列表，您会注意到浏览器特定的边距仅为 HTML-standard block elements 设置。并且没有设置特定于浏览器的填充。换句话说，padding: 0是多余的。但事实上，margin是浏览器中最不平衡的，来回答你的实际问题。

我可能会在这里踩到别人的脚趾，但以我最卑微的观点，使用 CSS 重置样式表是荒谬的。无论如何，您都必须自己 重新定义大部分边距(和填充)。您也可以学习并遵守规则，为要在文档中使用的每个 block 元素定义边距(以及必要时的填充)。

关于重置的残余:

• border: 0也是多余的。 <hr>大多数表单输入元素是唯一具有默认边框的元素。没有它，<hr>是不可见的(实际上，这在 IE6/7 中失败了)并且具有相同背景颜色的表单上的文本输入元素也是不可见的。

• outline当然不应该重置，它会破坏可访问性。你需要自己控制它，例如仅在带有(背景)图像的链接上自己重置它，因为这是重置它的主要原因。但是，它仍然破坏了可访问性。而是考虑为其提供不同的轮廓颜色或样式，使其仍然可见，但不那么令人不安。

• font-size: 100%会迫使您自己在 <h1> 中重新定义它们, <h2>等元素。但即使没有重置，您通常也已经想这样做了。那么这个重置有什么意义呢？

• vertical-align: baseline;打破了 <sub> 的对齐方式和 <sup>这样它们看起来像<small> .此外，表头也可能受到影响。这些默认为 middle在所有 浏览器中。您需要自己再次重新定义它们。此外，众所周知，此重置可能会导致 IE6/7 对图像造成严重破坏。

• background: transparent; 的值我不清楚。我没有看到此重置的任何意义，预计它可能会使 IE6/7 发疯。您还需要自己再次重新定义所有表单输入元素的背景颜色，这只会增加更多工作(对于将它们放置在彩色容器中的情况)。我敢肯定，每当您遇到需要透明背景的元素时，您都可以轻松地自己发现并自行设置。

Enfin，看看你如何处理这些信息。我不会阻止您使用 CSS 重置。我自己发现 CSS 重置仅在 10 多年前我刚开始使用 HTML/CSS 时才有用。但随着岁月的流逝，我也了解到这完全是胡说八道。但我承认，这对初学者很有用，因为重置将迫使他们自己明确地设置边距和其他内容。如果不重置，您也可以做得很好。