代码之家 › 专栏 › 技术社区 › Jitendra Vyas

在所有浏览器中,页边距和填充是否是最不平衡的?

css

Jitendra Vyas · 技术社区 · 15 年前

当一些人使用这个重置。 *{ 保证金:0; 填料:0; }

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

埃里克·迈耶收集了一些最常用的选择器,并把它给了所有人。

{
    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;
}

3 回复 | 直到 15 年前

BalusC 15 年前

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

如果您仔细研究这个列表,那么您会注意到特定于浏览器的页边距仅为 HTML-standard block elements 而且没有设置特定于浏览器的填充。也就是说, padding: 0 是多余的。但事实上, margin 是最不平衡的浏览器,以回答您的实际问题。

在这里,我可能会踩到别人的脚,但在我最卑微的观点中,使用CSS重置样式表是荒谬的。你必须重新定义大部分的页边距(和填充) 你自己 不管怎样。您可以很好地学习并保持自己的规则,为文档中要使用的每个块元素定义边界(如果需要填充)。

关于重置的剩余部分:

这个 border: 0 也是多余的。这个 <hr> 大多数表单输入元素是唯一具有默认边框的元素。没有它, <人力资源部; 是不可见的(实际上,在IE6/7中失败),并且具有相同背景颜色的表单上的文本输入元素也是不可见的。
这个 outline 当然不应该重新设置,它会破坏可访问性。您需要自己控制它,例如,仅在带有(背景)图像的链接上重置它,因为这是重置它的主要原因。但是,它还是破坏了可访问性。而是考虑给它一个不同的轮廓颜色或样式,以便它仍然可见,但不那么令人不安。
这个 font-size: 100% 会强迫你自己在 <h1> , <h2> 等元素。但是,即使没有重置,您通常也已经愿意这样做了。那么重设的目的是什么?
这个 vertical-align: baseline; 中断对齐 <sub> 和 <sup> 让他们看起来像 <small> . 此外,表格标题也可能受到影响。默认为 middle 在里面 全部的 浏览器。你需要自己重新定义它们 再一次 . 另外,已知此重置可能会导致IE6/7对图像造成严重破坏。
价值 background: transparent; 我不清楚。我看不出这种重置有什么意义,希望它会让IE6/7发疯。您还需要自己重新定义所有表单输入元素的背景色,这只会增加更多的工作(对于将它们放置在有色容器中的情况)。我敢肯定,每当你遇到一个需要透明背景的元素时,你可以很容易地发现它并自己设置。

恩芬,看看你如何处理这些信息。我不会阻止你使用CSS重置。10年前,当我刚开始使用HTML/CSS时,我自己发现CSS重置只会有用。但随着岁月的流逝,我也学会了这是一派胡言。但我承认,这对初学者很有用,因为重置会迫使他们自己设置利润和其他东西。 明确地 . 如果不重新设置,你也可以做得很好。

Derek 15 年前

好吧,“比这更好”很难说,但是有更多东西的人做的更多。

大纲0使链接周围没有虚线边框。

border 0生成图像,且图像周围没有边框。

字体大小:100%可能会确保字体为100%。

垂直对齐:基线将所有垂直对齐设置为容器底部,

背景:透明可以防止一些PNG问题。

但是边距:0和填充:0是两个不应该从重置列表中忽略的值。

Pianosaurus 15 年前

简短的回答是:如果您准备好为以后可能需要它的任何元素重写它,那么可以自由地设置所有这些元素。

但是,请注意,在构成元素时,前面可能有很多工作要做。它们至少需要一个边框才能看起来不错,其中一些(如按钮)也需要填充。此外,一些浏览器默认情况下在按钮周围显示三维边框。如果将border设置为0,您将无法使用css返回该三维视图。

另外,您可能想退房 http://www.blueprintcss.org/ . 它很好地平衡了浏览器,虽然我自己没有尝试过。