How To Remove White Space Under An Image Using CSS

White space under an image can be caused by the line-height and font-size properties of the surrounding text. To remove white space under an image using CSS, you can set the line-height and font-size properties of the text to 0, and set the display property of the image to block. Here’s an example:

<p>
    <img src="image.jpg" alt="image">
    Some text here
</p>

img {
    display: block; /* removes the white space */
    vertical-align: middle; /* align the image in the middle of the line */
}
p {
    line-height: 0; /* removes the white space */
    font-size: 0; /* removes the white space */
}

This will remove the white space under the image by setting the line-height and font-size of the text to 0 and display:block on image will make the image take the full width of the parent container and it will remove the extra white space.

Alternatively, you can also use the vertical-align property with a value of middle to align the image in the middle of the text line, which will remove the white space under the image.

img {
    vertical-align: middle; /* align the image in the middle of the line */
}

It’s also worth noting that you might also want to add width and height of the image, which will prevent the image from resizing and also eliminate the whitespace.

img {
    width: 100px; /* width of the image */
    height: 100px; /* height of the image */
    vertical-align: middle; /* align the image in the middle of the line */
}

This will ensure that the image takes the width and height specified and eliminates any extra white space. You can adjust the width, height, and the vertical-align property values to suit your needs.

Also Read:

• CSS Interview Questions With Answers