如何消除html中div之间的差距？答案

【问题标题】：How to remove the gap between div in html?如何消除html中div之间的差距？
【发布时间】：2011-07-05 11:15:41
【问题描述】：

我被这个问题困住了，无法摆脱这个问题。请帮帮我。

在我的网页中，我在一个容器 div 中使用了 3 个 div。我正在尝试消除 div 之间不需要的间隙。

(1)顶部背景图片
(2)中间背景图片
(3)底部背景图片

我正在尝试调整这 3 个 div，使其看起来像一个背景图像。我的中间部分和底部部分已完全调整，但顶部和中间部分之间有一些差距，我试图移除但无法移除。

请参考我附在此处的图片，该图片显示了顶部和中间部分之间的间隙。请参考我用于放置图片的样式表数据。

提前致谢。

#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 */
}

【问题讨论】：

@user515990 你的 HTML 标记是什么？
我的意思是 HTML 代码，即具有这些 id 的 DIV。

标签： html gaps-in-visuals

【解决方案1】：

我遇到了同样的问题，我可以解决这个问题的唯一方法是在浏览器中使用 InspectElement 并不断将边距更改为某个 -ve 值。

【讨论】：

【解决方案2】：

在这种情况下，保证金重置非常适合我

【讨论】：

【解决方案3】：

这在我有三个（顶部、中间、底部）背景并且每个都是 div 标签时有效

margin:-8px;

【讨论】：

这个答案重复上一个答案

【解决方案4】：

我自己解决了这个问题

margin:-16px

【讨论】：

-16 从何而来？我认为这种方式存在一些跨浏览器不一致。

【解决方案5】：

这是 Top bg 图像大小的问题。图像的大小为 45 pix，我将 div 的大小设为 47 pix。通过减小 div 的大小解决了我的问题。非常感谢 Dawson 和 DBz 的帮助。

【讨论】：

【解决方案6】：

一些调整将解决它：

#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 都可以有边距或内边距，只要它不是接触另一边的“边”（即：#top 的底部和#middle 的顶部需要触摸而不是移动）

从这里开始，看看需要对演示文稿进行哪些调整。我从顶部、中间、底部删除了定位，因为它与所需的效果无关。您可能需要添加它们以在其中绝对定位项目，但这是另一篇文章。

【讨论】：

@Dawson：感谢所有的努力。如果我正在使用 background-image:url('/DiscoverCenter/images/apps_btm.png') no-repeat;然后我的图像没有出现。这里有什么问题，请帮助
对不起。尝试删除“不重复”。编辑帖子以匹配。
@Dawson：我检查了萤火虫中的元素，实际上问题是，顶部和中间之间有一个间隙，所以我可以看到容器 div 的 bg 图像。我不认为，顶部正在重复。
两件事...1。注释掉#main_container 上面的所有代码，看看问题是否仍然存在。如果是这样，那就是里面的 CSS。 2. 发布指向页面的链接，或发布 HTML，以便每个人都可以看到您在做什么。听起来您仍在填充某些内容，或者在#top 或#middle 上设置了边距。如果没有你所有的代码，或者至少是给你带来麻烦的部分，很难说。
@Dawson：我在代码中将边距 0 放在重要位置，以便优先。您可以参考链接 jsfiddle.net/axEbC，我在那里分享了我的 html。如果您知道任何事情，请提供一些指示。非常感谢

【解决方案7】：

您可能希望将 padding 设置为 0 而不是 10px，并明确设置 div 的高度而不是使用 auto。

或者创建一个可容纳整个背景图像的包装 div，这样您就不必担心它们在某些浏览器中不对齐...

【讨论】：

我正在动态填充内容，所以我无法明确设置。我必须根据内容大小进行设置。我已经采用了一个包装器 div(container div)，它包装了所有 3 个 div。感谢您的建议。

【解决方案8】：

您是否考虑过使用重置？

* {
    padding: 0px;
    margin: 0px
}

将其添加到顶部

但是，当我们讨论这个主题时：您是否使用图像来获得圆角？现在你可以使用 CSS 来获得圆角！

这是一个可以帮助解决这些问题的网站：

http://www.css3.info/preview/rounded-border/

【讨论】：

@dbz: 圆角不是我的明确要求，我必须使用 3 张图片来填充我需要的内容并且我无法正确调整它们:(
@user515990 你能把你的代码副本发到 jsfiddle.net 吗？
可以把你用的图片放到网上吗？
@Dbz: 请参考picasaweb.google.com/hemish.kapadia/Feb282011?feat=directlink#
你还有同样的问题吗？如果是这样，您可以发布一个带有工作图像的 jsfiddle 吗？