set icon and text on image - html

Question

I was try to set icons and text on images but it put extra space beside image, so how can i remove extra space from image?
.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

first : your img tags are not correct. should be <img src="url">
second : display:inline generates white spaces between elements. so i suggest you use float:left instead
for example if you want 4 divs on one row, use float:left;width:25%; that way you are sure there are no white spaces between the divs
also to be sure the img covers all the width of the div, use width:100%;height:auto on the img. plus overflow:hidden on the img has no effect . you can use it on the div instead
see snippet below :
.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>