By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

margin property for BODY

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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

On Tue, 28 Oct 2003 01:46:43 GMT, Terry <sa********@shaw.ca> wrote:
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


Jul 20 '05 #2

P: n/a
> 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 :)

Jul 20 '05 #3

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

On Tue, 28 Oct 2003 05:13:21 GMT, Terry <sa********@shaw.ca> wrote:
On Tue, 28 Oct 2003 01:46:43 GMT, Terry <sa********@shaw.ca> wrote:
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).
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.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #4

P: n/a
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.

--
Mikko

Jul 20 '05 #5

P: n/a
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?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6

P: n/a
Tim
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.


Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote:
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.

--
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.
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.