How to remove the gap between div in html?

问题:

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

回答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/

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

回答3:

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

回答4:

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.

回答5:

I managed to solve the problem myself by

margin:-16px

回答6:

margin reset works perfect for me in such cases

回答7:

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.

回答8:

This worked when i had three (top, middle, bottom) backgrounds and each was a div tag

margin:-8px;