homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Let's get some CSS straight ..
CSS for the document BODY
DrDoc

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



 
Msg#: 183 posted 2:38 am on May 29, 2002 (gmt 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>

 

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 183 posted 3:04 am on May 29, 2002 (gmt 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)

rjohara

10+ Year Member



 
Msg#: 183 posted 3:31 am on May 29, 2002 (gmt 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.

DrDoc

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



 
Msg#: 183 posted 3:34 am on May 29, 2002 (gmt 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.

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 183 posted 4:58 am on May 29, 2002 (gmt 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.

madmatt69

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 183 posted 7:45 am on May 29, 2002 (gmt 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?

Nick_W

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



 
Msg#: 183 posted 7:50 am on May 29, 2002 (gmt 0)

Just margin: 0; will do it ;)

Nick

tedster

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



 
Msg#: 183 posted 7:58 am on May 29, 2002 (gmt 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

DrDoc

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



 
Msg#: 183 posted 8:45 pm on May 29, 2002 (gmt 0)

.. like a clock

top - right - bottom - left

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 183 posted 9:54 pm on May 29, 2002 (gmt 0)

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

DrDoc

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



 
Msg#: 183 posted 10:00 pm on May 29, 2002 (gmt 0)

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

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 183 posted 10:03 pm on May 29, 2002 (gmt 0)

EXACTLY

sparrow

10+ Year Member



 
Msg#: 183 posted 10:29 pm on May 29, 2002 (gmt 0)

Very nicely explained everybody.

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved