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

【问题标题】：How to remove unwanted vertical spacing between divs如何删除div之间不需要的垂直间距
【发布时间】：2013-07-20 02:05:10
【问题描述】：

我在开发网站前端时遇到了一些障碍。我能胜任 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

【问题讨论】：

使用clearfix方法，你可以搜索一下。

标签： css vertical-alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这其实是浮动问题

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

css

.banner {
    width:100%;
float:left;
}

http://jsfiddle.net/eLbUU/4/

【讨论】：

【解决方案3】：

首先，将深棕色的div放入浅棕色的div中。这样，在调整窗口大小时，您不会影响大小百分比和/或间距。

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

有了空格，您可以像其他人提到的那样使用负边距或浮动。

.banner {
    width:100%;
    /* margin-bottom to the banner is negative which moves the div upward */
    margin-bottom: -10px;
}

fiddle here

【讨论】：

【解决方案4】：

放置显示：块；对于图像类和浮动：左；对于所有其他元素可能会有所帮助。

.banner {
    width:100%;
    display:block;
    float:left;
}

http://jsfiddle.net/bjliu/eLbUU/7/（编辑：抱歉链接错误）

【讨论】：

【解决方案5】：

使用显示块并浮动 div，同时确保 img 本身是隐藏溢出的显示块我能够收紧 img 的条纹：fiddle

.banner {
    width:100%;
    display: block;
    overflow: hidden;
}
div div{
    float: left;
}

【讨论】：

【解决方案6】：

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

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

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

看看here

【讨论】：

谢谢，我试过 vertical-align: top;之前，但我没有将横幅设置为块显示。无论如何，我真的不想涉及浮点数，因为我觉得它们没有必要，而且我正在避免负边距，因为我担心它会在不同的屏幕分辨率下看起来如何。