Where did this extra space come from? - html

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>