<Body> 标签的 Margin 和 Padding

Question

22

我正在编写一个非常简单的HTML代码，如下所示。使用记事本编写，并在IE-8和Firefox中打开（操作系统：Windows Vista）。

<html>
<body>
    <table border="1"><tr><td>test</td></tr></table>
</body>
</html>

以上代码并没有什么特别之处，它只是在左上角创建了一些空白。

输入图像描述

可以使用以下代码轻松移除这些空白。

<body style="margin:0; padding:0">

现在我已经找到了默认的边距和填充，对于Firefox来说它是4，而对于IE-8来说则不同。

<body style="margin:4; padding:4">

我对这种情况有一些问题。

谢谢。

- Arun Singh

1

在至少 Firefox 中，对我来说它总是 8px。无论是从左边还是从顶部。 - paddotk

@poepje，是的，Firefox似乎遵循http://www.w3.org/TR/CSS2/sample.html。 - Pacerier

4个回答

3

浏览器内置了大多数HTML元素的CSS“合理默认值” - 这只是防止您的页面在没有CSS的情况下完全不可读，但它们当然旨在被您自己的CSS覆盖。

默认浏览器样式通常称为“用户代理样式表” - 以下网站是各种奇怪的UA表格IE多年来已经提供，并在底部提供其他浏览器的UA表格。

许多人使用的一种方法来“规范化”默认值，使您在所有浏览器中具有相同的起点是“CSS重置” - 这只是一段CSS片段，您可以将其放在自己的CSS之前，将所有UA样式设置为相同的内容。这是一个众所周知的方法：

- lucideer

你有其他主要浏览器（如Chrome和FireFox）默认样式的资源吗？ - Pacerier

请查看http://www.iecss.com/页面底部-不过这个答案已经有2年了，我不确定该网站更新频率如何。 - lucideer

0

试试这个

body{
    line-height: 0
}

- softcod.com

-5

将此代码添加到您的样式表顶部

*{margin:0px;padding:0px;}

这消除了浏览器间填充和边距的所有差异。

- Mr-29

8

这种方法很糟糕，因为星号选择符会选择所有内容。结果可能比您尝试在其他地方设置的其他值更具体。更不用说移除了您可能没有意识到依赖的“合理”默认值。 - RonLugge

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

这种差异是我们设计师使用CSS重置的主要原因之一，以规范所有CSS的尴尬之处，遵循不同的浏览器实现。