How to fix image inside div having extra space below the image with CSS?

Spread the love

Sometimes, we want to fix image inside div having extra space below the image with CSS.

In this article, we’ll look at how to fix image inside div having extra space below the image with CSS.

How to fix image inside div having extra space below the image with CSS?

To fix image inside div having extra space below the image with CSS, we can set the img element’s line-height to 0.

For instance, we write

<div class="wrapper fix">
  <img src="http://dummyimage.com/300x100/08c/fff&text=line-height:0" />
</div>

to add a div with an img element in itt.

Then we write

.wrapper {
  width: 300px;
  margin: 10px;
  border: solid tomato;
}

.fix {
  line-height: 0;
}

to set the img’s line-height to 0 to remove the gap at the bottom.

Conclusion

To fix image inside div having extra space below the image with CSS, we can set the img element’s line-height to 0.

Leave a Reply

Your email address will not be published. Required fields are marked *