html - 为什么 <body> 元素上有默认边距?

标签 html css

<分区>

在我的大部分开发生涯中,我只需要涉足基于 Web 的前端 UI 开发。一直困扰我的一件事是不断需要重置基于浏览器的样式“假设”,我经常忘记这一点,直到这些默认设置开始影响我的页面布局。

大多数浏览器做出的最大假设是 HTML <body>元素应该有边距,几乎总是 8px。

这个违约 margin 的设计决定是什么?

事实上,这种边距非常不受欢迎,因此将这种类型的样式包含在站点的每个页面都包含的 .css 文件中基本上是标准做法:

html, body
{
    margin: 0px; padding: 0px
}

恕我直言,从逻辑上讲,大多数开发人员都想要一个完整的空白板,他们可以使用该板并自行决定格式化。由于浏览器默认在 body 元素周围留有边距,因此设计人员必须注意间距并添加代码以计算其内部元素的正确布局(如果他们不重置布局的话)。

出于什么原因,HTML 浏览器的原始开发人员或最初的 HTML 规范决定在所有 body 元素上设置此默认边距?

最佳答案

语言最初是为独立工作而构建的。这样您就可以在技术上仅将特定语言用于预期目的。在 HTML 的情况下,它只允许您在浏览器上显示某些内容。另一方面(正如您肯定知道的那样),CSS 旨在创建所有美化过程。因此,考虑到这一点,任何人都应该能够编写完全没有任何 CSS 的 HTML 文档,并且浏览器应该以最易读的形式显示它。现在,为了尽可能一致地发生这种情况,浏览器有一种叫做“合理的默认值”的东西。这些默认值包括正文的边距和填充、一些字体、最清晰的字体大小等。它们让您根据需要使用 CSS 进行覆盖。

如果主体上没有边距和填充,所有内容都会完全刷新到浏览器窗口。如果您正在阅读文档,那不是最佳做法。

编辑

下面的链接显示了 Firefox 和 Webkit CSS 默认值。这将帮助您解决那些您不知道它们来自何处或为何存在的默认值。

Webkit

Firefox

关于html - 为什么 <body> 元素上有默认边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34550467/

相关文章:

javascript - 如何在不使用长度和宽度的像素的情况下制作完美的圆

javascript - 服务器路径的流程

javascript - 从动态文本字段将数据插入到 mysql 中,并将数据插入到两个表中。

javascript - 为 IE6 调试 javascript

javascript - 世界地图粒子效果javascript

css - 如何在 ng-animate 之后保持 CSS3 动画状态?

html - 单击 JSP 中的 Div 时调用 Servlet doPost 方法

javascript - .animate() 不工作?

javascript - 动态模型、商店和 View ——最好的方法

php - 使用 PHP-CSS-PARSE 解析 css 并生成文件