<Body> 标签的边距和填充答案

【问题标题】：Margin and Padding of <Body> Tag<Body> 标签的边距和填充
【发布时间】：2012-06-19 11:26:45
【问题描述】：

我正在编写一个非常简单的 HTML 代码，如下所示。用记事本编写，在 IE-8 和 Firefox（操作系统：Window 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">

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

谢谢。

【问题讨论】：

【解决方案1】：

试试这个

body{
    line-height: 0
}

【讨论】：

【解决方案2】：

将此添加到样式表的顶部

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

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

【讨论】：

这是一种可怕的方法，因为 * select 将选择所有内容。因此，可以认为比您可能尝试在其他地方设置的其他值更具体。更不用说删除你可能没有意识到你依赖的“理智”默认值。

【解决方案3】：

浏览器为大多数 HTML 元素的 CSS 内置了“合理的默认值”——如果你有没有 CSS 的纯 HTML，这只会防止你的页面看起来完全不可读，但它们当然会被你自己的 CSS 覆盖。

默认浏览器样式通常称为“用户代理样式表” - 以下网站很好地参考了 IE 多年来拥有的各种特殊 UA 表，并提供了一些对于底部的其他浏览器：

很多人用来“规范化”默认值的一种方法是 “CSS 重置” - 这只是您放置在您自己的 CSS 之前的 CSS 的 sn-p，它将所有 UA 样式设置为相同的东西。这是众所周知的：

【讨论】：

【解决方案4】：

首先，它可能是4px 而不是4。其次，这正是浏览器供应商决定的默认方式。
它保存在默认浏览器样式表中。
您可以，但您不应该。它因每个浏览器而异。去谷歌上查询！ How do I change default stylesheet on <insert browser here>?
可能存在细微差别，您应该可以通过查看默认样式表来判断... :)

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

【讨论】：

值得一提——改变浏览器的行为并不能解决任何问题
关于 3. 的小提示：只有当页面仅供个人使用时，这才是好的。如果它发布在网络上并且其他人可以看到该页面，他们将有 4/8 像素的边距，因此看到的页面与预期的略有不同。