In this post, we will learn how to remove white space under an image using CSS. When we put an image into a <div> than we will see an extra white space under an image. How can we remove this, we will learn this in post.


How To Remove White Space Under An Image Using CSS ?


Remove White Space Under An Image

<img> element is a inline element so browser by default adds some extra whitespace under the image to adjust other inline elements. For remove this extra whitespace we can use display:block css property. This property changes the default display value from inline to block. Therefore after applying this property we no longer see additional white space under the image.


<!DOCTYPE html>
<html>
<head>
<title>How To Remove White Space Under An Image Using CSS ?</title>
<style>

div {
border: 2px solid #000;
}

img {
width: 200px;
display: block;
}

</style>
</head>
<body>

<div>

<img src="example.jpg" alt="Example Image" />

</div>

</body>
</html> code-box


Summary

In this post we learned how to remove white space under an image using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post