1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A question about the margin property for "html" and "body"

Discussion in 'CSS' started by tayiper, Aug 19, 2006.

0
  1. #1
    I've already opened many threads here on Digital Point forum (or participated in), in which I questioned about the margins and padding and the difference in displaying them between Firefox and Internet Explorer; for instance see the: Few things that are different in FF compare to IE, Margins and padding; again IE's display compare to Firefox's one, and Pages displays perfectly in Firefox but not IE or Netscape such threads if you want ...


    And in one of them I also asked about the recommendation my friend gave me (see the examples below) to use the margin property for "html" and "body" selectors and IIRC (since I can't find that particular thread anymore) one of the memebers here on DP said that at least in "html" selector's case, this actually doesn't do anything, or that it doesn't make sence (I kind of understand why though)


    The code in case of "html" selector is the following:

    html {
    margin: 10px;
}
    Code (markup):
    The code in case of "body" selector is the following:

    body {
    margin: 10px;
}
    Code (markup):

    My question is: could anyone please explain this thing to me once more, i.e. this "issue" of html element not being able to have margins (or/and padding) ??!


    tayiper
     
    tayiper, Aug 19, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Pretty much every browser sets up a surrounding space for the page. It is usually 8px. You can do this by setting the padding on html or body, or by setting the margin on body. Different browser vendors write their default stylesheets um, differently[1]. So if you want to control that space, first you must normalize it to zero by setting 
    
html, body {
    padding: 0;
    margin: 0;
    }
    Code (markup):
    Now you can set your own, or leave it zero. This is similar to what's happening with list indentions. IE and Opera give ul and ol 40px left margin, while Safari and Firefox set 40px left padding. To set your own indention, first zero the left padding and margin.

    //edit: in re: styling the html element;

    In xhtml, the html element is no different than any other element except that by definition (the DTD)[2], it is the root, or highest level element and may not be any other element's child. --gt

    Does that make sense?

    cheers,

    gary

    [1] The Firefox default stylesheet has this: 
    
body {
  display: block;
  margin: 8px;
}
    Code (markup):
    [2] 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            [color=red]^ the root element[/color]
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Code (markup):
     
    kk5st, Aug 19, 2006 IP
  3. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #3
    Thanks much "kk5st" for a quick reply ...


    tayiper
     
    tayiper, Aug 19, 2006 IP
  4. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #4
    /UPDATE:

    You know, actually I've opened a thread on Digital Point forum about this particular "problem" in which you've helped me too, see here: Why the "list" element is not aligned as I expect it to be ?? if you want to ...


    tayiper
     
    tayiper, Aug 19, 2006 IP