CSS: why there is a small gap at the bottom of the image inside an absolute div?

Question

I have a simple absolute div and an image inside it.

I don't know why there is this strange small gap/empty space underneath the image. I used other images in the same div and it seems to be the same!

This is what I have:

.adHolder {
  width:100%;
  /*height: auto;*/
  position:absolute;
  bottom:0;
  left:0;
  /*border-top:solid 1px #fff;*/
  padding:0;
  margin:0;
  z-index:1;
}

.adHolder img {
  width:100%;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:none;
}

<div class="adHolder">
  <img src="http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg">
</div>

if you look at the bottom of the image, there is a small line (empty space) which I need to get rid of.

Any pointers would be appreciated.

display: block; or vertical-align: bottom; – VXp May 11 '18 at 09:21 — VXp, May 11 '18 at 09:21
Add font-size: 0; on adHolder div – Nandita Sharma May 11 '18 at 09:22 — Nandita Sharma, May 11 '18 at 09:22

score 2 · Accepted Answer · edited May 11 '18 at 09:23

2

add display:block to image

.adHolder {
  width:100%;
  /*height: auto;*/
  position:absolute;
  bottom:0;
  left:0;
  /*border-top:solid 1px #fff;*/
  padding:0;
  margin:0;
  z-index:1;
}

.adHolder img {
  width:100%;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:none;
  display: block;
}

<div class="adHolder"><img src="http://via.placeholder.com/350x150"></div>

edited May 11 '18 at 09:23

Minal Chauhan

6,025
8
21
41

answered May 11 '18 at 09:21

patelarpan

7,188
2
20
25

what you have edited @MinalChauhan – patelarpan May 11 '18 at 10:13
i have just formated the code and corrected the image spell. – Minal Chauhan May 11 '18 at 10:17
I think the edit is necessary when there something that changes the answer or question meaning. – patelarpan May 11 '18 at 10:23

CSS: why there is a small gap at the bottom of the image inside an absolute div?

1 Answers1