HTMLとCSS：エレメント間のスペースを削除できません

html要素間のスペースを削除するのに苦労します。
私はdisplay: inline-block,float: right、ulビューなど多くの方法を試しました。HTMLとCSS：エレメント間のスペースを削除できません

以下のスニペットでわかるように、画像間には空白があります。

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

だから、どのように私はそのスペースを削除しますか？

編集：ボーダーは実際には画像の一部です。申し訳ありませんが、おかげで、とにかく、ありがとう！：|

この投稿を削除してください！

出典

2016-12-20 Hike Nalbandyan

お使いのブラウザの開発コンソールを開いて、実際にそのギャップの原因を見つけます。 – arkascha

あなたのCSSクラスbrandpage-banner-containerを調べてみましょう。あなたは幅として50％を設定しました。それを30％に下ろうとするか、単に幅の境界を外してください。 – SKLTFZ

'divs 'の' width'がここで問題になります。。 –

私はかなり白いボーダーが画像そのものの一部だと確信しています。

出典

2016-12-20 10:58:23 bitten

スナップショットOPに感謝@HikeNalbandyan – bitten

この試してみてください：あなたはそれが動作する幅の自動を作る場合

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

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

出典

2016-12-20 10:58:49 Taniya

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

を。

出典

2016-12-20 10:58:59

は、私はそれが画像の境界線ではない要素で試してみました...

そしてまた、画像の境界線は、いくつかの空白を持つ

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

出典

2016-12-20 11:02:23 Sankar

-1

これを試してみてください。私はちょうどとして保存し、Photoshopの境界線で開くすべての側面です。

出典

2016-12-20 11:02:45 Hanif

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

出典

2016-12-20 11:08:48

HTMLとCSS：エレメント間のスペースを削除できません

答えて

関連する問題