这个额外的空间来自哪里？

There's a very small line of space under the ADVANCED SEARCH 这个额外的空间来自哪里？

代码：

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内吗？

来源

2011-10-23 Gerald Torres

如果您使hdr p成为div，会发生什么情况？ –

为什么你只是不简单地删除p标签，看看会发生什么 – kechapito

同样的事情，我只是添加了p标签，为你们看清楚这个差距... –

尝试添加无保证金/填充每个元素：

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

（而不是100像素，使用实际的大小，和6个像素是一个宽猜测），然后使用HTML：

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

来源

2011-10-23 14:00:01 ItsGreg

完成除.hdr类中的填充外。我需要填充：10px 0;在.hdr类中。 –

然后尝试删除底部的填充：'.hdr {padding：10px 10px 0 10px;}' – ItsGreg

差距消失了，但“ADVANCED SEARCH”标题的下半部分也是如此。对于顶部和底部，我需要10px，对于“ADVANCED SEARCH”图像的font = 40px高度，需要20px。 –

这个额外的空间来自哪里？

回答

相关问题