CSS 如何删除div之间不需要的垂直间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17768922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove unwanted vertical spacing between divs
提问by Joshua Walsh
I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle herethat illustrates my problem.
在为网站开发前端时，我遇到了一些障碍。我擅长 CSS，但并不出色。无论如何，我在这里创建了一个 jsFiddle来说明我的问题。
On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)
在我网站的每个页面上，在内容部分的顶部，我都有一个横幅图片。我希望放置一个两个颜色的分隔线，将这个横幅与内容分开。（如我的设计师给我的模型所示：https: //www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg）
I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:
我想在纯 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>
(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)
（请原谅内联 CSS，它仅用于演示目的。另外，不幸的是，如果我将第二个 div 放在换行符上并缩进，它会产生空格）
The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.
我遇到的问题是分隔线和图像之间存在很大差距。我尝试将 margin: 0px 和 padding: 0px 添加到所有相关元素，但空白仍然存在。
Could someone help me out please?
有人可以帮我吗？
Thanks, YM
谢谢，YM
回答by Chad
To me it's a vertical alignment issue. You can try
对我来说，这是一个垂直对齐问题。你可以试试
.banner {
display: block;
width: 100%;
}
div {
height: 10px;
vertical-align: top;
}
That way you don't have to use negative margins (which aren't wrong, just controversial practice).
这样你就不必使用负边距（这没有错，只是有争议的做法）。
Check it out here
检查出来这里
回答by Hushme
this is actually float problem
这实际上是浮动问题
<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
css
.banner {
width:100%;
float:left;
}
回答by Daniel
you can make the position relative and then set the top to something minus. ex:
您可以使位置相对，然后将顶部设置为负值。前任：
position: relative;
top:-10px;
left:0px;
回答by Parker Hutchinson
using display block and floating the divs, also making sure the img itself is display block with overflow hidden I was able to tighten up the stripes to the img : fiddle
使用显示块并浮动 div，同时确保 img 本身是隐藏溢出的显示块我能够将条纹收紧到 img：fiddle
.banner {
width:100%;
display: block;
overflow: hidden;
}
div div{
float: left;
}
回答by kmkmkm
First of all, put the darker brown in the lighter brown div. That way, when the window is re-sized, you don't compromise the sizing percentage and/or spacing.
首先，将深棕色放在浅棕色的div中。这样，当窗口重新调整大小时，您不会影响大小百分比和/或间距。
<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>
And with the space, you can either use negative margins or floats like others have mentioned.
有了空间，您可以使用负边距或像其他人提到的那样浮动。
.banner {
width:100%;
/* margin-bottom to the banner is negative which moves the div upward */
margin-bottom: -10px;
}
回答by bjliu
Putting display: block; for the image class and float:left; for all other elements may help.
推杆显示：块；对于图像类和 float:left; 对于所有其他元素可能会有所帮助。
.banner {
width:100%;
display:block;
float:left;
}
http://jsfiddle.net/bjliu/eLbUU/7/(Edit: Sorry Wrong Link)
http://jsfiddle.net/bjliu/eLbUU/7/（编辑：抱歉链接错误）
