How to get rid of the gap under the image ?
Last Updated :
08 May, 2023
In this article, we will see how to remove the gap generated under the image, while implementing the CSS border property. Generally, we have seen that when we apply the border property on the image then extra white space is also generated around the image or under the image. For instance, while using the <div> tag, when we put an image inside it then we get some extra white space (almost 2px) between the lower border of the div and the image inside it.
In order to get rid of additional white space, there are 3 properties that can be used:
We will understand these 3 methods in detail, along with their implementation. Let’s begin discussing the CSS display property.
Example: In this example, we can see the default behavior of the browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<title>White space under the Image</title>
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
</style>
</head>
<body>
<div class="container">
<img src=
</div>
</body>
</html>
|
Output:
The tiny gap between the lower end of the image and the bottom green border of the div.
The reason behind this thing occurred is due to the browser’s default behavior, it is not a bug or any type of technical error in the browser. The main fact is that <img> tag is rendered as an Inline element. So an image is treated just like an alphabet and it will sit on a baseline like a, b, s, A, etc.
In the above image, we can see alphabets like g and y, have Descenders i.e. some portion of those alphabets lies below the baseline. Since <img> tag is treated as an inline-block element. When we place an image inside a <div> tag, it covers the area up to the baseline, and the area below is left unused and is seen as white space. This is the default behavior that creates the gap at the bottom of the container.
Display Property: The most commonly used solution is used to change the display property of the <img> tag inside the <div> container from the default ‘inline‘ value to ‘block‘ using display: block property.
Syntax:
display: block;
Example: This example describes the use of the display property to remove the white space under the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the display Property
</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src=
</div>
</body>
</html>
|
Output:
Using display: block property
Vertical Aligning: Vertical Align attribute has a value set to ‘baseline’, by default, that aligns the element with the baseline of the parent. The value of the attribute can be changed from baseline to bottom as vertical-align: bottom.
Syntax:
vertical-align: bottom;
Example: This example describes the use of the vertical-align property to remove the white space under the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the vertical-align
Property
</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
}
.container img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container">
<img src=
</div>
</body>
</html>
|
Output:
Using vertical-align property
Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
Syntax:
line-height: 0%;
Example: This example describes the use of the line-height property to remove the white space under the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Removing the white space
using the line-height
Property
</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.container {
width: 300px;
border: 4px solid rgb(30, 194, 66);
line-height: 0%;
}
</style>
</head>
<body>
<div class="container">
<img src=
</div>
</body>
</html>
|
Output:
Using line-height property
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...