title: How to remove the gap between div in html?
body: <p>I am stuck with this problem and not able to come out of this. Please help me.</p>
  
  <p><img src="https://i.stack.imgur.com/udIN0.png" alt="enter image description here"></p>
  
  <p>In my webpage, I have used 3 divs inside a container div.I am trying to remove the unwanted gap between the div.</p>
  
  <ul>
  <li>(1)Top bg image</li>
  <li>(2)Middle bg image</li>
  <li>(3)Bottom bg image</li>
  </ul>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>#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 */
  }
  </code></pre>