user3649115 user3649115 - 3 months ago 6
HTML Question

set icon and text on image

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

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>