margin property for BODY

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Terry - 28 Oct 2003 02:46 GMT

I'm real new at this, so this may be a basic question, but I want to
get off on the right foot.

I thought it would be reasonable to use the following on a page:

    body {
    margin: 3em;
    background-color: #666;
    border: red medium double;
    padding: 3em;
    }

I thought that it would display the red border shifted in 3em from the
outside edge .. but instead the border is stuck against the edge
(IE6). Does that mean that the 'element box' concept does not apply
to the body element? I noticed that the margin size (3em) is being
accounted for, since if I change it, everything moves over. But I
don't understand why the border is not between the margin and padding
as described by the 'box'.

I know I can get a border like that by creating a div with the same
margin, and maybe that is the correct method. But I just thought that
this seemed correct. Am I missing something? Did a lot of hunting
and couldn't find any specific info on it.

Thanks... Terry

Reply to this Message

Terry - 28 Oct 2003 06:13 GMT

I guess I may have discovered the problem. Looks like even IE6 can't
do this 'right', but both Opera and Netscape 6.2 are able to do it the
way I would have expected.

Terry

>I'm real new at this, so this may be a basic question, but I want to
>get off on the right foot.
[quoted text clipped - 22 lines]
>
>Thanks... Terry

Reply to this Message

Stephen Poley - 28 Oct 2003 11:10 GMT

top-posting corrected: please have a look at:
http://www.xs4all.nl/~sbpoley/toppost.htm

>>I thought it would be reasonable to use the following on a page:
>>
[quoted text clipped - 8 lines]
>>outside edge .. but instead the border is stuck against the edge
>>(IE6).

>I guess I may have discovered the problem. Looks like even IE6 can't
>do this 'right', but both Opera and Netscape 6.2 are able to do it the
>way I would have expected.

Not often that I spring to IE's defence, but I think this (just) comes
within the area of acceptable variation between browsers. The margin
area of a box displays the background colour of its parent element. It
is at least arguable (though not defined anywhere AFAIK) that the
topmost element can not meaningfully have a margin. And also arguable
that the topmost displayable element is BODY, though some browsers do
permit styling of HTML.

OTOH the CSS spec does include an example where margin is applied to
BODY.

Signature

Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Reply to this Message

Brian - 29 Oct 2003 04:19 GMT

> It is at least arguable (though not defined anywhere AFAIK) that
> the topmost element can not meaningfully have a margin. And also
> arguable that the topmost displayable element is BODY
>
> OTOH the CSS spec does include an example where margin is applied
> to BODY.

I must say I'm confused by body margins. I think of the viewport as
the containing box for the body element, so that margin on body has no
meaning. Am I wrong to think that way?

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Tim - 29 Oct 2003 07:51 GMT

Stephen Poley wrote:

>> It is at least arguable (though not defined anywhere AFAIK) that
>> the topmost element can not meaningfully have a margin. And also
>> arguable that the topmost displayable element is BODY
>>
>> OTOH the CSS spec does include an example where margin is applied
>> to BODY.

> I must say I'm confused by body margins. I think of the viewport as
> the containing box for the body element, so that margin on body has no
> meaning. Am I wrong to think that way?

Taking non-HTML as a starting point, the body is where the content of
the page goes, the page is something beyond it.

Going back to HTML, various browsers that I've played with place the
body within the page. If you use margins and padding, you get the body
with space around it, within the canvas.

Not all browsers handle this sort of thing well, so I give zero padding
and margins to HTML, and put any desired paddings and margins into the
body.

e.g. html {margin: 0; padding: 0;}
body {margin: 0; padding: 1em;}

I'd tend to agree with Stephen; as far as I always understood it, the
browser is only supposed to display what's in the body of the document
(i.e. stuff that's in the wrong place, like in the head, shouldn't show
up), so it doesn't make much sense to display anything more than it
(such as colouring the HTML element around the body element, which is
possible with some browsers).

If you want to check out how some browsers handle margins and padding
with the body or html elements, then give them each different background
colours.

Signature

My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

Reply to this Message

Graham J - 28 Oct 2003 09:59 GMT

> I know I can get a border like that by creating a div with the same
> margin, and maybe that is the correct method. But I just thought that
> this seemed correct. Am I missing something? Did a lot of hunting
> and couldn't find any specific info on it.

You need to read up on 'quirks mode' and 'DOCTYPE switching'. I
recommend that any small, impressionable children are out of earshot
when you do as it may lead you to exclamations of extreme disbelief
expressed in a forthright manner.

To cut a long story short if you have e.g. <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> as your DOCTYPE (or none at
all) IE6 will emulate it's broken behaviour in previous versions (yes
really!) whereas if you add the URL as in e.g. <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> it will try to do things
properly (but fear not, it has plenty of other bugs to keep you on
your toes). There are various permutations of the DOCTYPE and
browsers which I'll leave you to read about.

Before IE6, IE had a particularly badly broken box model in that, for
example, the 'width' included the 'padding' when it should only apply
to the content itself so that is a good reason to make sure you aren't
using quirks mode. You have found another one :)

Reply to this Message

Mikko Rantalainen - 28 Oct 2003 11:38 GMT

Graham J / 2003-10-28 10:59:

>>this seemed correct. Am I missing something? Did a lot of hunting
>>and couldn't find any specific info on it.
>
> You need to read up on 'quirks mode' and 'DOCTYPE switching'. I

And the URL you missed to supply:
http://www.hut.fi/u/hsivonen/doctype.html

You usually want to select a totally green line from the table
presented on the page.

Signature

Mikko

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

margin property for BODY