Question

我已经创建了这个JSFiddle http://jsfiddle.net/aYn89/2/来演示我的问题，基本上我有一个大的标头后面的图像，但是，可能是因为我使用了＆＃39; display：inline-block＆＃39;在文档的前面，这些元素之间存在很大差距（特别值得注意的是，因为我在背景上使用了轻微的渐变），即使我还使用了将所有边距和填充设置为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%;
}

当我删除“差距”时走了。

Answer 2

删除其中一个，位置：属性或顶部：-60 它将调整带有id标头的div，并且将删除间隙。

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

2 个答案: