Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin and Padding of <Body> Tag

Tags:

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.

enter image description here

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.

like image 401
Arun Singh Avatar asked Jun 16 '12 20:06

Arun Singh


People also ask

What is margin and padding?

In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

What is padding and margin in HTML?

In HTML margins work the same way in giving space away from the edge of the page. Borders simply wrap the element. A border can wrap immediately around an element, or it may look further away from an element if more padding has been applied to the element. Padding provides space around the element.

What is body margin in HTML?

Unique Attributes. leftmargin - Sets a left hand margin for your body element. topmargin - Sets a margin along the top of your body element.

Does body have margin?

The body element has a default 8px margin indicated by the bar on top.


1 Answers

  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.

like image 75
Madara's Ghost Avatar answered Oct 10 '22 02:10

Madara's Ghost