How to remove gap between div in html?

Question

I am stuck in this problem and could not get out of this. Please help me.

On my webpage, I used 3 divs in a div container. I am trying to remove an unwanted gap between divs.

• (1) Top image bg
• (2) Medium image bg
• (3) Bottom Image bg

I am trying to customize these 3 divs so that it looks like a single bg image. My middle part and the lower part are fully adjusted, but the upper part and the middle part have some gap between the one I am trying to remove but cannot.

Please refer to the image that I have attached here, which shows the gap between the upper and middle parts. Please refer to the style sheet data that I used to place 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

Top bg. 45 , div 47 . div, . Dawson DBz .

Answer 2

reset?

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

, : ? CSS, !

-, :

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

Answer 3

:

#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 top of #middle )

, . , , , . , , .

Answer 4

, 0, 10px, divs , auto.

, , div, , , ...

Answer 5

margin:-16px

Answer 6

margin reset

Answer 7

I ran into the same problem, the only way I could fix it was to use InspectElement in the browser and keep changing the margin to some -ve value.

Answer 8

This worked when I had three (top, middle, bottom) background, and each of them was a div tag

margin:-8px;