简体繁体 English

浏览器用户代理样式表边距 8px

[英]Browser user agent style sheet margin 8px

原文 2015-09-17 07:01:53 6 2 html/ css/ stylesheet/ margin/ document-body

I was just wonerdering about a white space all around a website.我只是想知道网站周围的空白区域。 I found out it is there because of the user agent style sheet (Google Chrome) and there is set a margin of 8px to the body tag as default.我发现它在那里是因为用户代理样式表（谷歌浏览器），并且默认情况下为 body 标签设置了 8px 的边距。

How to solve this is not a problem, but I am interested in the reason of this margin.如何解决这个问题不是问题，但我对这个余量的原因很感兴趣。 I searched for it, but I only find solutions to set the margin zero, but I want to know why this margin is there.我搜索了它，但我只找到了将边距设置为零的解决方案，但我想知道为什么会有这个边距。

Hope you can tell me more about these user agent stylesheets.希望你能告诉我更多关于这些用户代理样式表的信息。

Greetings Philipp问候菲利普

2 个解决方案

Browsers add their own stylesheet with their proper rules to show how the web page should be rendered normally good looking for eg.浏览器添加自己的样式表和适当的规则，以显示网页应该如何呈现正常的外观，例如。 some reason you'd not add css rules for headers then how it should be displayed in the browsers?出于某种原因，您不会为标题添加 css 规则，那么它应该如何在浏览器中显示？

To answer the question browsers add their rules to show the web page headers how would normally look like.为了回答问题，浏览器添加他们的规则以显示网页标题通常的样子。

Like that the browsers using margin:8px;就像浏览器使用margin:8px; in body to show a web page in a cleaner visual way as pointed out by @Quentin is as writing in a paper.正如@Quentin 指出的那样，在正文中以更清晰的视觉方式显示网页就像在论文中写作一样。

So, we are the developer and how should be the page rendered?那么，我们是开发者，页面应该如何呈现？

To answer this we add our own stylesheet and make our own way for visual effect on the page.为了回答这个问题，我们添加了我们自己的样式表，并为页面上的视觉效果创造了自己的方式。

There are a lot of rules in the stylesheet added by browsers in default by different browsers.不同浏览器默认添加的样式表中有很多规则。 You can see them here for different browsers .您可以在此处针对不同浏览器查看它们。

And you may find several css reset stylesheet googling .您可能会在谷歌搜索中找到几个 css reset 样式表。

To be frankly, if I were one of them, I would set margin to 0 and let the developer do their task (if necessary, they would add it).坦率地说，如果我是其中之一，我会将边距设置为 0，让开发人员完成他们的任务（如果需要，他们会添加它）。 Alternatively, I would set padding instead of margin - if paper thing is considered.或者，我会设置填充而不是边距 - 如果考虑纸质的东西。 But since this is for electronic devices not for papers, I would just set everything to initial.但由于这是用于电子设备而不是纸张，我会将所有内容设置为初始值。 That is margin, padding, etc. to 0 as we know x,y works from top left corner unlike bottom left corner in paper.即边距、填充等到 0，因为我们知道 x,y 从左上角开始工作，这与纸张的左下角不同。

Also, I think they added margin because in the old days, we had table html to format the page.另外，我认为他们增加了边距，因为在过去，我们有表格 html 来格式化页面。 But today, we have no such case, and I would strongly suggest w3c to reset their old style to map new rules.但是今天，我们没有这种情况，我强烈建议 w3c 重置他们的旧风格以映射新规则。 If anyone officially reading this post, I hope the new browser default will rule the engine.如果有人正式阅读这篇文章，我希望新的浏览器默认值将统治引擎。

It is there because text that touches the border of the window is hard to read.它在那里是因为接触窗口边框的文本很难阅读。 ie for the same reason that we use margins when writing on paper.即出于与我们在纸上书写时使用边距相同的原因。