如何删除div之间不需要的垂直间距

Question

在为网站开发前端时,我遇到了一些障碍.我有能力使用CSS,但不是很棒.无论如何,我在这里创建了一个jsFiddle 来说明我的问题.

在我的网站的每个页面上,在内容部分的顶部,我有一个横幅图像.我想把一个双色分隔器从内容中分离出这个横幅.(正如我的设计师给我的模型所示:https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

我想用纯CSS + HTML做这个,而不是只是把图像放进去.无论如何,我使用下面的代码完成了:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>

(请原谅内联CSS,它仅用于演示目的.另外,不幸的是,如果我将第二个div放在换行符上并缩进它,它会创建空格)

我遇到的问题是分频器和图像之间存在很大差距.我尝试将margin:0px和padding:0px添加到所有相关元素,并且空白仍然存在.

有人可以帮帮我吗？

谢谢,YM

Answer 1

对我来说这是一个垂直对齐问题.你可以试试

.banner {
    display: block;
    width: 100%;
}
div {
    height: 10px;
    vertical-align: top;
}

这样你就不必使用负边距(这不是错误的,只是有争议的做法).

检查出来这里

Answer 2

您可以使位置相对，然后将顶部设置为负值。前任：

 position: relative;
 top:-10px;
 left:0px;