Home/ Questions/Q 6101235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T13:28:37+00:00

I’m struggling to under the behaviour of the following html and css code. I’m

  • 0

I’m struggling to under the behaviour of the following html and css code. I’m aware of box layouts and margin collapsing but it doesn’t seem to explain the following:

1) Using the code below, unmodified, the logo is shown with about 10px of white space between it and the top of the page and about 4 or 5 pixels below but of the color given by #allcontent.background-color. Interestingly if I set the font-size property within the body to 0px this removes all the white space above the logo and the 4 or 5 pixels below it.

2) If the padding value within #allcontent is changed from 0px to 1px then about 10px of padding is actually added above and below the logo with the color specified by the #allcontent.background-color.

index.html file: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="my.css" />
    </head> 

    <body>
        <div id="allcontent">
        <div id="header">           
            <p>
            <img width="200" height="60" src="images/logo.gif" alt="Logo" />
            </p>
            </div>
        </div>      
    </body>
</html>

my.css file: 

body {      
    margin: 0px;
    padding: 0px;
}

#allcontent{
    background-color: #dddddd;
    padding: 0px;
    margin: 0px;    
}

#header {   
    padding: 0px;
    margin: 0px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is your code: http://jsbin.com/eronaq

    Starting with the easier issue:

    the logo is shown with [..] about 4 or
    5 pixels below

    That gap is the space reserved for the descenders in text for letters like g and p.

    You can fix that in a few ways. For example, by setting display: block or vertical-align to top or bottom on the img.

    display: block: http://jsbin.com/eronaq/2

    the logo is shown with about 10px of
    white space between it and the top of
    the page

    See: http://reference.sitepoint.com/css/collapsingmargins

    That space is the margin-top on the p collapsing through all the way up to body, because there is nothing to stop it doing as defined by the rules of collapsing margins.

    By “touch,” we mean the places at
    which no padding, borders, or content
    exist between the adjacent margins.

    • 0