Welcome to WebmasterWorld Guest from 54.226.130.194

Forum Moderators: not2easy

Message Too Old, No Replies

Let's get some CSS straight ..

CSS for the document BODY

     

DrDoc

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

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



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>

madcat

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

WebmasterWorld Senior Member 10+ Year Member



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)

rjohara

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

10+ Year Member



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.

DrDoc

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

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



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.

papabaer

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

WebmasterWorld Senior Member 10+ Year Member



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.

madmatt69

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

WebmasterWorld Senior Member 10+ Year Member



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?

Nick_W

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

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



Just margin: 0; will do it ;)

Nick

tedster

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

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



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

DrDoc

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

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



.. like a clock

top - right - bottom - left

madcat

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

WebmasterWorld Senior Member 10+ Year Member



and don't forget the infamous, "you'll be in trbl if you don't think about it." ;)

DrDoc

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

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



in trouble .. if I don't think about the clock? ;)

madcat

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

WebmasterWorld Senior Member 10+ Year Member



EXACTLY

sparrow

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

10+ Year Member



Very nicely explained everybody.

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