画像にアイコンと文字を設定

Question

画像にアイコンやテキストを設定しようとしましたが、画像の横に余分なスペースを入れました。

.fb { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 5px; 
 
    z-index: 100; 
 
} 
 
.tweeter { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 5px; 
 
    z-index: 100; 
 
} 
 
img { 
 
    overflow: hidden; 
 
} 
 
div { 
 
    height: 250px; 
 
    width: 250px; 
 
    display: inline; 
 
}

<div> 
 
    <img https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 

 
    <div> 
 
    <img https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 

 
    <div> 
 
    <img https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 

 
    <div> 
 
    <img https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div>

Answer 1

最初：あなたのimgタグは正しくありません。 <img src="url">

秒：display:inlineは要素間に空白を生成します。私はまた、IMGはすべて網羅確かにfloat:left;width:25%;あなたはdivs

の間には空白がないことを確認しているその方法を使用し、あなたは1行の4つのdivをしたい場合は、例えばfloat:left代わり

を使用することをお勧めdivの幅は、imgでwidth:100%;height:autoを使用してください。プラスoverflow:hiddenはimgには効果がありません。あなたの代わりにdiv

にそれを使用することができ、以下の抜粋を参照してください。余分なスペースです

.fb { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 5px; 
 
    z-index: 100; 
 
} 
 
.tweeter { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 5px; 
 
    z-index: 100; 
 
} 
 
img { 
 
    
 
    width:100%; 
 
    height:auto; 
 
} 
 
div { 
 
    height: 250px; 
 
    width: 250px; 
 
float:left; 
 
    width:25%; 
 
    position:relative; 
 
    
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
    <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 
<div> 
 
    <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 
<div> 
 
    <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div> 
 
<div> 
 
    <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
</div>