I am building this page: http://gwwc2.centreforeffectivealtruism.org/ . As you will see, the top 2 visible HTML elements are an image (the text “Provide what we can” on a blue background) and a horizontal menu. I want no space between them, but I see no reason in CSS or in the Firebug or Chrome developer tools. (Here's the video in which I try to find the reason in Chrome - I click one element after another and usually see some indentation or addition that explains the gap between the two selected elements, but as you can see, no.)
Since the publication of this materman indicated that removing the bottom border of the bottom HTML element (menu) fixes the problem. My question is why should the lower bound cause a space above this? (Second question: are there any more effective tools than Firebug or tools for Chrome developers to identify these things, since they do not reveal this.)
HTML / CSS (skipable)
You are probably best off learning HTML and CSS yourself (this is a bit tricky because it's part of the Zen-based Drupal theme), but here is a partial selection. 2 elements:
<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>
None of these identifiers / classes have a set of fields / additions that I can see (except that marked .blockhas a lower field).
Question edited to reflect negative margin.