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.
