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

Question

我在为网站开发前端时遇到了一些小问题。我能胜任 CSS，但并不出色。无论如何，我创建了一个 jsFiddle here这说明了我的问题。

在我网站的每个页面上，在内容部分的顶部，我都有一个横幅图片。我希望放置一个两色分隔器将此横幅与内容分开。 (如设计师给我的模型所示: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;
}

这样您就不必使用负边距(这并没有错，只是有争议的做法)。

检查一下 here