我正在构建此页面：http://gwwc2.centreforeffectivealtruism.org/。如您所见，前 2 个可见的 HTML 元素是图像(蓝色背景上的文本"尽我们所能"(和水平菜单。我希望这些之间没有空间，但是在CSS或Firebug或Chrome的等效开发人员工具中，我无缘无故地可以看到。(这是我试图在Chrome中找到原因的视频 - 我点击一个又一个的元素，通常会看到一些边距或填充，这解释了突出显示的2个元素之间的差距，但如您所见。
自从发布此 mattmanser 指出，删除底部 HTML 元素(菜单(的底部边距可以解决问题。我现在的问题是，为什么底部边距应该在此上方产生空间？(第二个问题是，是否有比Firebug或Chrome的开发者工具更好的工具来发现这些东西，因为他们没有透露这一点。
HTML/CSS(可跳过(
你最好自己检查HTML和CSS(它有点复杂，因为它在基于Zen的Drupal主题中(，但这里有一个部分示例。这两个要素是：
<div id="gwwc-logo-header">
<a href="/">
<img src="/sites/givingwhatwecan.org/themes/gwwc2/images/chrome/header/top-blue-header.png" alt="Giving What We Can">
</a>
</div>
<div class="region region-header">
<div id="block-superfish-1" class="block block-superfish first last odd">
</div>
这些 ID/类都没有我可以看到的任何边距/填充集(除了如前所述.block有一个下边距(。
问题经过编辑以反映保证金底部负责
元素
id block-superfish-1 具有类block，该类向元素添加1.5em margin-bottom。
这造成了差距。单击视频末尾的元素，该值将显示在资源管理器中。
这是解决您问题的解决方法。将以下代码添加到您的 CSS 中。
#gwwc-logo-header {
height: 45px;
}
干杯！！！