Results 1 to 7 of 7
  1. #1
    5 Star Lounger PaulB's Avatar
    Join Date
    May 2002
    Location
    Ottawa, Ontario
    Posts
    765
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 1 of ???

    I am attempting to (self) learn CSS using tutorials and other material I can find on the Web. I found a template that I can use to create a page but there is one thing that I can't figure out. I have attached a much simplified version of the code. Can anyone tell me why I am getting the white space around the blue header box? What can I do to get rid of this white space?

    Cheers,
    Regards,
    PaulB

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Question 1 of ???

    You want the box to be snug against the "viewport" -- the document area of the browser? The white space there is the body's margin. You can remove the margins with this rule:

    <code>body {margin:0;}</code>

    If you eliminate the body's margin, though, you may later have to add padding or margins to other elements so text is not uncomfortably close to the edge of the viewport. That's not as drastic as it sounds: because the default margins differ in different browsers, many designers do this on every page as a matter of course to maintain consistency.

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Question 1 of ???

    In addition to Jeff's answer there is the option of having different margins for the Top, Right, Bottom and Left Margins.

    The syntax is as follows

    body { margin: [TOP], [RIGHT], [BOTTOM], [LEFT]}


    body { margin: 2px } /* all margins set to 2px */
    body { margin: 1px 2px } /* top & bottom = 1px, right & left = 2px */
    body { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */
    body { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */
    body { margin: 1px 2px 3px 4px } /* top=1px, right=2px, bottom=3px, left=4px */

    If you want to make it tidier ( and this is my preference as I find it easier to bug fix and is self-apparent)

    body {
    margin-top: 1px;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-left: 4px;
    }

    With Jeff's code all the borders for body will be set to 0 but you can play but his suggestion is a good idea for the cross browser but be careful of inheritance
    Jerry

  4. #4
    5 Star Lounger PaulB's Avatar
    Join Date
    May 2002
    Location
    Ottawa, Ontario
    Posts
    765
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Question 1 of ???

    Thank you, Jefferson and Jerry. Both your solutions resolve the basic issue. However, I'm puzzled why there is an apparently implied default of <span style="background-color: #FFFF00; color: #000000; font-weight: bold">body {margin:10px;}</span hi> applied to the code I attached. The page I am attempting to rewrite using CSS currently uses frames. There is no issue of body margins in this or any other of my (very) few HTML coding attempts. Maybe I am blissfully unaware of them! I can see more questions coming...

    Cheers
    Regards,
    PaulB

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Question 1 of ???

    Hi Paul

    Dredging through my mind, I seem to remember 10 pixels was the default margin size for IE 3+ and was not necessarily the same for Netscape and Mozilla browsers. As all browsers do not show the CSS layout the same, it is set to 10px as a default to allow the base margin to be the same in all.

    BTW It is best practice to use EM for the width (EM is defined as the with of a capital M for the current font being used) So you could use it like this:

    body {margin:1 em;}
    Jerry

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Question 1 of ???

    The body technically does not occupy the entire viewport (although a background color applied to the body usually will). Instead, the body consumes the width of the viewport (minus its margins) and is just tall enough to contain its contents. This is more evident if you add this rule to your test page:

    <code>body {
    border:4px solid red;
    }</code>

    As for the default margin width, this depends on the browser you are using. In Firefox, it is 8px all around. Results in IE, Opera, Safari, and Linux browsers probably vary. The attached has a script to report the margins of the body element. It could be adapted for various other tests.
    Attached Files Attached Files

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Question 1 of ???

    That is a useful resource Jeff, thanks... I was partly right with the 10px margin <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

    I have a developer at work who will be using this script <img src=/S/cool.gif border=0 alt=cool width=15 height=15>
    Jerry

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •