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

Question

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.

• (1)Top bg image
• (2)Middle bg image
• (3)Bottom bg image

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.

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

Answer 1

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!

Here is a website which can help with those:

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

Answer 2

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)

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.

Answer 3

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

Answer 4

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

Answer 5

You may want to set the padding to 0 rather than 10px and set the height of the divs explicitly rather than using auto.

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...

Answer 6

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.

Answer 7

我设法自己解决了这个问题

margin:-16px

Answer 8

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

margin:-8px;