3

このページを作成しています: http://gwwc2.centreforeffectivealtruism.org/ . ご覧のとおり、上位 2 つの表示可能な HTML 要素は、画像 (青色の背景に「Giving What We Can」というテキスト) と水平メニューです。これらの間にスペースがないようにしたいのですが、CSS、Firebug、または Chrome の同等の開発者ツールで見ることができる理由はありません。(これは、Chrome で理由を見つけようとしている私のビデオです。要素を次々とクリックすると、通常、強調表示された 2 つの要素間のギャップを説明するマージンまたはパディングが表示されますが、ご覧のとおり、そうではありません。 )

このマットマンサーを投稿して以来、下部の HTML 要素 (メニュー) の margin-bottom を削除すると問題が解決することが指摘されました。私の質問は、なぜ下マージンがこれより上にスペースを生じさせるべきなのかということです。(2 つ目の質問は、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のマージンがあることを除いて)。

margin-bottomが責任を負うことを反映するように編集された質問

4

2 に答える 2

3

要素 idには、要素に ofを追加するblock-superfish-1クラスがあります。blockmargin-bottom1.5em

それがギャップの原因です。ビデオの最後にある要素をクリックすると、値がエクスプローラーに表示されます。

于 2012-05-10T15:09:27.953 に答える
0

これは問題の回避策です。以下のコードを CSS に追加します。

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

乾杯 ！！！

于 2012-05-10T15:13:28.060 に答える