html - div CSS之间不需要的大垂直间隙

Question

我创建了这个 JSFiddle http://jsfiddle.net/aYn89/2/这证明了我的问题，基本上我有一个大的报头图像紧接着是文本，但是，可能是由于我在文档前面使用了“显示:内联 block ”，这些元素之间存在很大的差距(特别明显因为我在背景上使用了轻微的渐变)，尽管我还使用了一个将所有边距和填充设置为 0 的重置文件。

此外，当我检查 safari 中的元素时，也没有间隙或边距。我怎样才能消除这个差距？

HTML:

<nav> 
    <div id="logo"> 
        <img src="http://placehold.it/500x200" width="50%"> 
    </div> 
    <div id="links"> 
        <a href="#">  Home  </a>  
        <a href="#"> About </a> 
        <a href="#"> Portfolio </a> 
        <a href="#">  Contact </a> 
    </div> 
</nav>

<div id="masthead"> <img src="http://placehold.it/1400x500" width="100%" height="100%">     </div>

<div id="title"> Lorem ipsum blah blah blah </div>

<p> Lorem ipsum blah blah blah blah blah blah blah </p>

CSS

nav
{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,1);
    z-index: 100;
    position: relative;
    color: rgba(255,255,255,1.00);
}

#logo
{
    position: relative;
    display: inline-block;
    margin-left: 2%;
    margin-top: 0.5%;
    width: 40%;
    height: 100%;
    text-align: left;
    color: rgba(255,255,255,1.00);
    z-index: 100;
}

#links
{
    position: relative;
    height: 100%;
    top: 50%;
    width: 50%;
    display: inline-block;
    text-align: right;
    margin-right: 1.5%;
    margin-top: 1%;
    font-size: 100%;
    float: right;
    z-index: 100;
    color: rgba(255,255,255,1.00);
    text-transform: uppercase;
    word-spacing: 30px;
}

#links a:hover
{
    text-decoration: none;
    color: rgba(0,182,255,1.00);
}

#masthead
{
    display: block;
    position: relative;
    top: -60px;
    z-index: 0;
    width: 100%;
}

#masthead:after { content: " "; display: block; clear: both;}

#title
{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 36px;
    vertical-align: top;
}

Answer 1

你有这个

#masthead {
display: block;
position: relative;
top: -60px; /* this is probably part of the problem*/ 
z-index: 0;
width: 100%;
}

当我删除它时，“差距”就消失了。