html - 这个额外的空间从何而来？

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>