更多的div我使用了更大的差距

Question

我很快就开始使用div来在我的页面上安排艺术作品。在我得到我认为看起来正确的东西后，我在所有的div下得到了巨大的差距。似乎我使用的div越多，差距越大。我只是希望这个差距消失。有没有专业人士对此有答案？

这是我的代码：

<div>
    <div style="position: relative; left: 12px; top: -20px; width: 970px; height: 0px;">
        <img class="alignnone size-full wp-image-1285 devanco_ep_curimg" alt="dsm-napkin-top-TEMP" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-napkin-full.png" width="1001" height="131" />
    </div>
    <div style="position: relative; left: 65px; top: -20px; width: 450px; height: 100px; padding: 20px;">
        <div>
            <h5>We’re a creative full service marketing firm in Northern New Jersey.</h5>
            <h6>Creative Branding | Advertising | PR | Website Design | SEO | World Class Client Support</h6>
        </div>
    </div>
</div>
&nbsp;
<div style="position: relative; left: 548px; top: -180px; width: 193px; height: 72px;">
    <a title="The DSM Group Is A Full Service Agency" href="http://thedsmgroup.com/jason/agency-2/">
        <img class="alignnone size-full wp-image-1412" alt="dsm-who-we-are-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-who-we-are-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;
&nbsp;
<div style="position: relative; left: 750px; top: -339px; width: 193px; height: 72px;">
    <a title="The Most Complete Marketing Agency In NJ" href="http://thedsmgroup.com/jason/services/">
        <img class="alignnone size-full wp-image-1411" alt="dsm-what-we-do-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-what-we-do-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;

Answer 1

这是因为top:-339px等所有热门调整。

相对定位一个元素并没有真正将它从文档流中取出，它只是使用它的静态空间并从那里移动它。这意味着如果你有这样的元素......

.rel {
position:relative;
top:-100px;
}

......技术上仍然填补了其他空间，因此其他元素不会向上移动以填补空白。

Here's a jsFiddle to illustrate it.

请注意下图中如何创建间隙。

Answer 2

这是因为你使用了nbsp;或者这个空格让div标签覆盖更多的空间。所以你使用了position：relative和top：-100px，这也导致了div上的巨大差距