Margin and Padding of <Body> Tag

谁说我不能喝 提交于 2020-01-10 17:27:51

问题


I am writing a very simple HTML code which is listed below. Written in notepad and opening in IE-8 and Firefox (OS: Window Vista).

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

There is nothing special in the above code, It is creating some space from top left corner.

Which can be easily removed by using the following code

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

Now i have find out the default margin and padding, which is 4 for Firefox and different for IE-8.

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

I have some question on this scenario.

  1. Why this value is 4?
  2. From where this value is coming, is it saved somewhere?
  3. Can we modify (configurable) this default value?
  4. How these values are different for browsers?

Thanks.


回答1:


  1. First of all, it's probably 4px and not 4. Second, that's just the way the browser vendor decided should be the default.
  2. It is saved in the default browser stylesheets.
  3. You can, but you shouldn't. It differs with each browser. Google it! How do I change default stylesheet on <insert browser here>?
  4. There probably are slight differences, you should be able to tell... by looking at the default stylesheets :)

That difference is one of the main reasons we as designers use a CSS reset, to normalize all of the CSS awkwardness that follows different browser implementations.




回答2:


Browsers have built-in "sane defaults" for the CSS of most HTML elements - this just prevents your page looking completely unreadable if you have pure HTML without CSS, but they are of course intended to be overridden by your own CSS.

The default browser styles are typically referred to as a "User Agent Style Sheet" - the following site is a good reference of the various peculiar UA sheets IE has had over the years and also provides ones for other browsers at the bottom:

http://www.iecss.com/

One method a lot of people use to "normalise" the defaults so you have the same starting point in all browsers is a "CSS Reset" - this is just a snippet of CSS that you place before your own CSS that sets all of the UA styles to the same thing. This is a well known one:

http://necolas.github.com/normalize.css/




回答3:


Try this

body{
    line-height: 0
}



回答4:


Add this on top of your stylesheet

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

This eliminated all differences in padding and margin across browsers.



来源:https://stackoverflow.com/questions/11066823/margin-and-padding-of-body-tag

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!