3

我正在建立这个页面： http: //gwwc2.centreforeffectivealtruism.org/。正如您将看到的，前 2 个可见的 HTML 元素是一个图像（蓝色背景下的文本“Giving What We Can”）和一个水平菜单。我希望这些之间没有空间，但是我无缘无故地在 CSS、Firebug 或 Chrome 的等效开发工具中看到。（这是我试图在 Chrome 中查找原因的视频- 我一个接一个地单击一个元素，通常会看到一些边距或填充，这解释了突出显示的 2 个元素之间的间隙，但正如您所见，没有。 )

由于发布此 mattmanser 指出删除底部 HTML 元素（菜单）的 margin-bottom 解决了问题。我现在的问题是为什么底部边距应该在此上方留出空间？（第二个问题是是否有比 Firebug 或 Chrome 的开发者工具更好的工具来发现这些东西，因为他们没有透露这一点。）

HTML/CSS（可跳过）

您最好自己检查 HTML 和 CSS（它有点复杂，因为它在基于 Zen 的 Drupal 主题中），但这里有一个部分示例。这2个元素是：

<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有底部边距）。

问题已编辑以反映保证金底部负责

4

2 回答 2

3

元素 idblock-superfish-1具有向元素block添加 amargin-bottom的类1.5em。

这就是造成差距的原因。您单击视频末尾的元素，该值将显示在资源管理器中。

于 2012-05-10T15:09:27.953 回答
0

这是解决您的问题的方法。将以下代码添加到您的 CSS。

#gwwc-logo-header {
height: 45px;
}

干杯！！！

于 2012-05-10T15:13:28.060 回答