Margins in HTML and BODY

Forum Moderators: not2easy

Message Too Old, No Replies

Margins in HTML and BODY

What's the difference?

ThisEndup

11:46 pm on Sep 29, 2003 (gmt 0)

I was looking at some CSS code for a very well designed site, and ran across this early code...


html {
margin: 0px;
padding: 0px;
}
body { 
font: 9pt/17pt georgia; 
color: #555753; 
margin: 0px; 
padding: 0px;
}

What exactly is the difference between taking away the margins/padding in the <body> compared to taking away the same thing in the <html>, why would it be neccessary to define both?

And also one more thing I just noticed... What exactly does the 9pt/17pt do to the font? Why two values?

TGecho

12:15 am on Sep 30, 2003 (gmt 0)

Some browsers seem to give the html padding and margin (I think, can't remember for sure :) )

As for the "9pt/17pt": the first value is font-size, the second value is line-height.

madmac

2:42 am on Sep 30, 2003 (gmt 0)

yeah I ran into this last week. IE, NS, and Mozilla don't seem to add any margin to the html tag, but Opera does. that html { padding: 0; margin: 0; } will take care of unwanted margins in Opera and any other browser that puts margins on the html tag.

moonbiter

2:39 pm on Sep 30, 2003 (gmt 0)

What exactly is the difference between taking away the margins/padding in the <body> compared to taking away the same thing in the <html>, why would it be neccessary to define both.

For forward compatability.

Technically, the root of the document tree [w3.org] serves as the initial containing block [w3.org] for layout on the canvas. Since this is the html element in web documents, some browser manufacturers (i.e., Opera) seem to have decided to define the default margin/padding of the viewport in their default browser stylesheet on this element. Others define it on the body for backward compatability reasons (the body has traditionally been used as the initial containing block for the purposes of displaying documents in the viewport).

Since the W3C recs leave it up to browser manufacturers to do this, defining zero margins on both the html and body is insurance on the part of the web developer.

bill

6:05 am on Oct 1, 2003 (gmt 0)

SuzyUK made an interesting comment in message #30 of this thread [webmasterworld.com]:

* {padding: 0; margin: 0; border: 0;}
is a better catchall
then I set them to what I require as I go on..

The more I thought about this the more it seemed like a good idea to force everything to zero and then set your own widths. This may not override everything in all browsers, but it may be good practice so that at least you know you're not at the mercy of some browser's default display properties.