为什么元素上有默认的保证金?

时间:2015-12-31 18:43:33

标签: html css

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

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

这个默认保证金的设计决定是什么?

事实上,这种边际是如此不可取,以至于将这种类型的样式包含在网站的每个页面都包含的.css文件中基本上是标准做法:

html, body
{
    margin: 0px; padding: 0px
}
恕我直言,逻辑将要求大多数开发人员想要一个完整的,空白的平板,他们可以自己决定使用和格式化。由于浏览器默认了body元素周围的边距,设计人员必须保持对间距的争议,并添加代码以计算内部元素的正确布局,如果他们不重置布局。

HTML浏览器的原始开发人员是否有任何理由在默认情况下决定在所有正文元素上抛出此边距?

2 个答案:

答案 0 :(得分:19)

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

没有身体上的边距和填充,一切都将完全刷新到浏览器窗口。如果您正在阅读文档,这不是最佳做法

修改

以下链接显示Firefox和Webkit CSS默认值。这将帮助您解决那些您不知道它们来自哪里或者它们存在的默认值。

Webkit

Firefox

<强>更新

MXR替换为DXR的Firefox {{1}}中,以上链接无效,此处为Firefox 的有效链接https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css

答案 1 :(得分:1)

这可能是因为大多数开发人员都没有采取额外的步骤直接进入建筑工地和应用程序,以确保身体边缘周围有适当的间距,这使得文本正好向上移动屏幕。

有经验的开发人员应该采取额外的步骤来重置样式,如果他们想要完全控制,但我认为自动样式是2个邪恶中的较小者。想想所有在那里使用GoDaddy或其他类似托管服务构建简单网站的人。