这个额外空间来自哪里？

Question

代码：

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;
}

奇怪的是，这种情况发生在Firefox中，但不会发生在Chrome中。此外，当我使用Firefox进行缩放时，此空间也会消失。

我不确定为什么会这样。这是因为<p>不在'LeftItem'div中吗？

Answer 1

尝试为每个元素添加边距/填充：

*
{
   padding:0;
   margin:0;
}

关于您的评论的编辑： 您不希望使用填充来适合您的图像。您所做的是获取图像的宽度和高度，并执行以下操作：

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

（而不是100px，使用实际尺寸，6px是一个广泛的猜测） 然后使用html：

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