Welcome to WebmasterWorld Guest from 54.198.232.79

Forum Moderators: not2easy

Message Too Old, No Replies

Let's get some CSS straight ..

CSS for the document BODY

     
2:38 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


I've seen a zillion posts on here where people use the following stylesheet:

<style type="text/css">
body {
margin: 0px;
}
</style>

This is, however, not the correct way to do it. You are supposed to use padding, not margin, since the margin property suggests a an outer margin between the BODY and HEAD sections.

Padding is always an inner margin, from the edge of the element to the contents.

The correct way to specify margins for the body would therefore be:

<style type="text/css">
body {
padding: 0px;
}
</style>

3:04 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


Hello again-

NN.x actually requires a margin property equal to zero in order to display correctly. I thought the same thing was happening in Opera a while back but your right, padding: 0; does the trick.

Madcat

(edited by: madcat at 3:54 am (utc) on May 29, 2002)

3:31 am on May 29, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:July 20, 2001
posts:449
votes: 0


Actually, the root element of most web pages is HTML rather than BODY, although not all browsers are able to render styles on HTML correctly. (Hardly surprising, since they don't render styles on a lot of things correctly.)

Try something like

HTML { padding: 3em; background: green; }
BODY { background: white; }

and you'll see a nice green canvas with the BODY placed on top of it.

3:34 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


madcat, you're right. You might have to specify a margin for NN4

rjohara .. well, of course HTML is the root element. But since the BODY element will take up 100% of the screen unless otherwise specified, then padding is 99% of the time what you want to do, not set the margin.

4:58 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


body {margin:0;} works because it controls the "margins" of the body "container". A value of "0" overides any assumed spacing provided by a particular browser. Since no "padding" is initially assigned to the body, a value of "0" is assumed (just as in a div). This is why "body{margin:0;}" allows content to begin at the very top/left of the display.

The NYPL style sheets use BOTH margin and padding: body{margin:0; padding:0;}... probably a pretty safe bet all the way around (no pun intended!).

The "habit" of declaring margins is a carry-over from the bad-old-days of <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> needed to appease both propriety IE & NN.

7:45 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 28, 2001
posts:779
votes: 0


A bit of a css newbie question -

Is it necessary to put margin: 0px 0px 0px 0px? Or will margin: 0px automatically set all margins to 0px?

7:50 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Just margin: 0; will do it ;)

Nick

7:58 am on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Yes, you can just declare the "0px" value once.

There's a "collapsing rule" that comes into play when all four values aren't declared. The order for the four values is:

TOP -- RIGHT -- BOTTOM -- LEFT

If the value for Right is missing, the value for Top is applied
If the value for Bottom is missing, the value for Top is applied
If the value for Left is missing, the value for Right is used

So, a three value declaration (v1 v2 v3) gives v1 -- v2 -- v3 -- v2
A two value declaration (v1 v2) gives v1 -- v2 -- v1 -- v2
And a one value declaration uses that value for all four positions

8:45 pm on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


.. like a clock

top - right - bottom - left

9:54 pm on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


and don't forget the infamous, "you'll be in trbl if you don't think about it." ;)
10:00 pm on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


in trouble .. if I don't think about the clock? ;)
10:03 pm on May 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


EXACTLY
10:29 pm on May 29, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 3, 2002
posts:430
votes: 0


Very nicely explained everybody.

Almost as if it came out of one of my books.