Question

The code:

HTML:

<div id = "LeftDiv">
    <p class = "hdr">ADVANCED SEARCH:</p>
    <div class = "LeftItem">
        <form>
            <p style="margin:0;padding: 10px 0;">Weird Space above this</p>
            <input type = "text" name = "search" />
            <input type = "submit" value = "Go" />  
        </form>
        <br />
    </div>
    <br />
    ...There are some more (like a vertical navigation bar,
    which also has this gap between the header and the navigation bar)

CSS:

#LeftDiv
{
    float: left;
    width: 20%;
    text-align: center;
    color: #fff;
}

.LeftItem
{
    background: #000 url("") no-repeat;
}

.hdr
{
    text-transform: uppercase;
    font-weight: bold;
    background: url("header.png") no-repeat;
    padding: 10px 0;
    margin: 0;
}

The weird thing is, this happens in Firefox, but not in Chrome. Also, this space disappears when I zoom when using Firefox.

I’m not really sure why this happened. Is this because the <p> is not inside the ‘LeftItem’ div?

Answer 1

try adding no margin/padding for every element:

*
{
   padding:0;
   margin:0;
}

EDIT REGARDING YOUR COMMENTS:
You don’t want to use padding to fit your image in. What you do is get your image width and height, and do this:

.hdr
{
width:100px;
height:100px;
display:block;
background:url("header.png") no-repeat;
}
.hdr span
{
font-weight:bold;
text-transform: uppercase;
padding: 6px auto;
}

(instead of 100px, use actual size, and 6px is a wide guess)
ANd then use html:

<div class="hdr"><span>advanced search</span></div>