Html 如何消除html中div之间的差距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5137281/
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 the gap between div in html?
提问by Gendaful
I am stuck with this problem and not able to come out of this. Please help me.
我被这个问题困住了，无法解决这个问题。请帮我。
In my webpage, I have used 3 divs inside a container div.I am trying to remove the unwanted gap between the div.
在我的网页中，我在容器 div 中使用了 3 个 div。我试图消除 div 之间不需要的间隙。
- (1)Top bg image
- (2)Middle bg image
- (3)Bottom bg image
- (1)顶级背景图
- (2)中间背景图
- (3)底图
I am trying to adjust these 3 divs so that it can look like one bg image. My middle part and bottom part are adjusted completely but top part and middle part have some gap in between that i am trying to remove but not able to.
我正在尝试调整这 3 个 div，使其看起来像一个 bg 图像。我的中间部分和底部部分已完全调整，但顶部和中间部分之间有一些间隙，我试图移除但无法移除。
Please refer to the image which i have attached here which shows the gap between top and middle part.Please refer the stylesheet data I had used for placing the images.
请参阅我在此处附加的图像，该图像显示了顶部和中间部分之间的间隙。请参阅我用于放置图像的样式表数据。
Thanks in advance.
提前致谢。
#main_container {
background-repeat:no-repeat;
width:645px;
float:left;
padding-bottom:10px;
overflow:hidden;
height:auto;
}
#middle_part {
background-image: url('/DiscoverCenter/images/apps_mid.png');
background-repeat:repeat-y;
width:645px;
padding-bottom:10px;
overflow:hidden;
height:auto;
clear:both;
position:relative;
display: block;
vertical-align: bottom;
}
#top_part {
background-image:url('/DiscoverCenter/images/apps_top.png');
width:645px;
top:0px;
height:47px; /* actual height of the top bg image */
clear:both;
position:relative;
display: block;
vertical-align: bottom;
}
#bottom_part {
background-image:url('/DiscoverCenter/images/apps_btm.png');
width:645px;
height:24px; /* actual height of the bottom bg image */
}
采纳答案by Gendaful
It was the Problem with the Top bg image size. Size of the image is 45 pix and I took it the size of the div as 47 pix. By decreasing the size of the div had solved my problem.Thanks a lot to Dawson and DBz for the help.
这是顶部 bg 图像大小的问题。图像的大小是 45 像素，我把它作为 47 像素的 div 大小。通过减小 div 的大小解决了我的问题。非常感谢 Dawson 和 DBz 的帮助。
回答by Dbz
Have you considered using a reset?
您是否考虑过使用重置？
* {
padding: 0px;
margin: 0px
}
Add that to the top
将其添加到顶部
However, while we are on the subject: Are you using images to get rounded corners? You can use CSS to get rouned corners nowadays!
但是，当我们讨论这个主题时：您是否使用图像来获得圆角？现在你可以使用 CSS 来获得圆角！
Here is a website which can help with those:
这是一个可以帮助解决这些问题的网站：
回答by Dawson
Some adjustments will fix it:
一些调整将修复它：
#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
float:left;
} /* setting height:auto and overflow:hidden won't do anything */
#top_part {
background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
clear:both;
height:47px;
}
#middle_part {
background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
display: block; /* only needed if you're assigning this id to an inline element */
min-height: ?? /* assure this element can expand, but never collapses completely */
vertical-align: bottom;
}
#bottom_part {
background:url('/DiscoverCenter/images/apps_btm.png');
height:24px;
}
top_part, middle_part, bottom_part can all have margins or padding as long as it's not a "side" that touches the other (ie: bottom of #top and top of #middle need to touch and not move)
top_part、middle_part、bottom_part 都可以有边距或填充，只要它不是接触另一个的“侧面”（即：#top 的底部和 #middle 的顶部需要接触而不是移动）
Start here, and see what presentation adjustments need to be made. I removed positioning from top, middle, bottom because it isn't relevant for the desired effect. You may need to add them in for absolutely positioning items inside of them, but that's another post.
从这里开始，看看需要进行哪些演示调整。我从顶部、中间、底部删除了定位，因为它与所需的效果无关。您可能需要将它们添加到其中以绝对定位项目，但那是另一篇文章。
回答by Saeed-rz
I managed to solve the problem myself by
我设法自己解决了这个问题
margin:-16px
回答by Rob
You may want to set the padding to 0 rather than 10px and set the height of the divs explicitly rather than using auto.
您可能希望将内边距设置为 0 而不是 10px 并明确设置 div 的高度而不是使用自动。
Or alternatively create a wrapper div that accommodates the entire background image so that you don't have to worry about them not aligning in some browsers...
或者创建一个包装 div 来容纳整个背景图像，这样您就不必担心它们在某些浏览器中没有对齐...
回答by DotCreatives
margin reset works perfect for me in such cases
在这种情况下，保证金重置非常适合我
回答by Naga
I came across the same issue, the only way I could fix this is by using InspectElement in browser & keep changing the margin to some -ve value.
我遇到了同样的问题，解决这个问题的唯一方法是在浏览器中使用 InspectElement 并将边距更改为某个 -ve 值。
回答by Alex
This worked when i had three (top, middle, bottom) backgrounds and each was a div tag
当我有三个（顶部，中间，底部）背景并且每个背景都是一个 div 标签时，这有效
margin:-8px;
margin:-8px;
