Question

我遇到了这个问题并且无法解决这个问题。请帮帮我。

enter image description here

在我的网页中，我在容器div中使用了3个div。我正在尝试删除div之间的不必要的差距。

（1）Top bg image
（2）Middle bg image
（3）Bottom bg image

我正在尝试调整这3个div，使其看起来像一个bg图像。我的中间部分和底部部分完全调整，但顶部和中间部分之间有一些间隙，我试图删除但不能。

请参考我附上的图片，其中显示了顶部和中间部分之间的间隙。请参阅我用于放置图像的样式表数据。

提前致谢。

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

Answer 1

您是否考虑过使用重置？

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

将其添加到顶部

然而，虽然我们讨论的主题是：你是否正在使用图像来获得圆角？你现在可以使用CSS来获得角落！

这是一个可以提供帮助的网站：

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

Answer 2

一些调整将解决它：

#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的顶部需要触摸而不是移动）

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

Answer 3

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

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

Answer 4

这是Top bg图像尺寸的问题。图像的大小是45像素，我把它的大小作为47像素。通过减小div的大小解决了我的问题。感谢道森和DBz的帮助。

Answer 5

我设法通过

解决了这个问题

margin:-16px

Answer 6

在这种情况下，

保证金重置对我来说非常适合

Answer 7

我遇到了同样的问题，唯一能解决这个问题的方法就是在浏览器中使用InspectElement＆amp;不断将保证金更改为某个值。

Answer 8

当我有三个（顶部，中间，底部）背景并且每个都是div标签时，这是有用的

margin:-8px;

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

8 个答案: