'HTML & CSS: Can't remove spacing between elemens

I'm having a hard time to remove the spaces between html elements.
I tried display: inline-block, float: right, ul view and many other ways.

As you can see in the snippet below, there is a white space between the images. 

#brandpage-banners .brandpage-banner-container {
  float: right;
  width: 50%;
}
<div id="brandpage-banners">

    <div class="brandpage-banner-container">
      <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_2.png">
    </div>

    <div class="brandpage-banner-container">
      <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_1.png">
    </div>

</div>

So, how do I remove that space?

EDIT: The border is actually a part of the image. Sorry guys, and thanks anyway, silly! :|

htmlcss


Solution 1:[1]

I'm pretty sure the white border is a part of the image itself.

Solution 2:[2]

Try this...

And also the image border have some white space

#brandpage-banners .brandpage-banner-container {
  float: right;
  width: 50%;
}
#brandpage-banners .brandpage-banner-container img {
  width: 100%;
}
#brandpage-banners {
  width: 100%;
}
<div id="brandpage-banners">

  <div class="brandpage-banner-container">
    <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_2.png">
  </div>

  <div class="brandpage-banner-container">
    <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_1.png">
  </div>

</div>

Solution 3:[3]

  #brandpage-banners .brandpage-banner-container {
    float: right;            
  }

 .brandpage-banner-container,.brandpage-banner-container img{
    position : relative;         
  }
<div id="brandpage-banners">

    <div class="brandpage-banner-container">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRirSq4E2oGo5aoyRERdKnUYMkk3hxiApQ86NCLRB_i0hiuiDQF">
    </div>

    <div class="brandpage-banner-container">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRirSq4E2oGo5aoyRERdKnUYMkk3hxiApQ86NCLRB_i0hiuiDQF">
    </div>

</div>

Solution 4:[4]

Try this:

#brandpage-banners .brandpage-banner-container {
  float: left;
  width: 50%;
}

#brandpage-banners .brandpage-banner-container img{
  display: block;
  max-width: 100%;
  margin: auto;
}

Solution 5:[5]

#brandpage-banners .brandpage-banner-container {
    float: right;
    width: auto;
}

If you make the width auto it will work.

Solution 6:[6]

I have tried it is image border not elements. I just save as and open with Photoshop border is in all sides.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bitten
Solution 2 Sankar
Solution 3 Praveen Rana
Solution 4 Taniya
Solution 5 Mad Angle
Solution 6 Hanif

Related Questions