You may face problems like getting extra space while adding images inside a <div> and developing the webpage. Therefore, you get a messed-up layout. In this blog, we will discuss why this happens and ways to fix it with examples.
Table of Contents:
Usually, the images are treated as inline-block elements. You can see they are lining up with the text baseline. This creates extra space below the image for parts of letters like “g” and “y.” This extra space is only for text, but in the absence of text, the unwanted gap below the image is created.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extra Space Below Image Example</title>
<style>
div {
width: 300px;
border: 2px solid red;
}
img {
width: 100%;
height: auto;
background: lightgray; /* Just for visibility */
}
</style>
</head>
<body>
<div>
<img src="https://intellipaat.com/blog/wp-content/uploads/2020/04/What-is-Web-Developer_BIG-1.jpg" alt="Example Image">
</div>
</body>
</html>
Output:
You can use properties such as display: block, vertical-align: top, font-size: 0, and line-height: 0 for this purpose. Let us discuss them below:
Learn Web Development and Launch Your Tech Career
Professional Web Development Courses
Method 1: Using display: block
You can see the image acts as an inline-block, and the image display is changed to a block to remove the extra space. So that the image won’t get aligned to the text baseline.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Space Around Image</title>
<style>
div {
border: 2px solid green;
display: inline-block;
line-height: 0;
font-size: 0;
}
img {
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<img src="https://intellipaat.com/blog/wp-content/uploads/2025/02/What-is-HTML-Feature-Image.jpg" alt="Example Image">
</div>
</body>
</html>
Output:
Explanation: Here, we are using img { display: block; } for removing the extra spaces, and the image is also treated as a block element.
Method 2: Set vertical-align: top
You can use the vertical-align: top for aligning the image to the top by removing the extra spaces.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Space Around Image</title>
<style>
div {
border: 2px solid red;
display: inline-block;
line-height: 0;
font-size: 0;
}
img {
vertical-align: top;
margin: 0;
padding: 0;
display: block;
}
</style>
</head>
<body>
<div>
<img src="https://i.ytimg.com/vi/sPHRitTKhL0/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLCq3YD6eu35WpFDLF4QN-DJUySFrg" alt="Example Image">
</div>
</body>
</html>
Output:
Explanation: The vertical-align: top property in the code displays the image without the code. You can see the image is aligned to the top without any extra space. You can also use this code to fix the issue regarding the alignment.
Method 3: Set font-size: 0; on the Parent div
You can set the parent div to the font-size: 0 to remove the extra spaces. The is saved through the text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Space Around Image</title>
<style>
div {
font-size: 0;
border: 2px solid red;
display: inline-block;
line-height: 0;
}
img {
margin: 0;
padding: 0;
display: block;
}
</style>
</head>
<body>
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsS63r8FnF_RJEiBZ9m1hjr8FpAFQMFQxzeA&s" alt="Example Image">
</div>
</body>
</html>
Output:
Explanation: Here, we are using the font-size: 0 property to remove the space. You can see the space is created by the text.
Method 4: Use line-height: 0; on the Parent div
You can use line-height: 0 to remove the space. Set the parent container to this property to remove the gap completely.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Space Around Image</title>
<style>
div {
line-height: 0;
border: 2px solid orange;
display: inline-block;
font-size: 0;
}
img {
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<img src="https://intellipaat.com/blog/wp-content/uploads/2023/06/HTML-Layout-Elements-Techniques.png" alt="Example Image">
</div>
</body>
</html>
Output:
Explanation: In this code, the line-height: 0 property is used for removing the extra space. The space is created by the line height.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
The above-discussed methods are an efficient way to remove the space below the image when it is considered unnecessary. You can use display: block, vertical-align: top, font-size: 0, or line-height: 0 for this purpose. Therefore, you can make sure your layout looks clean and there is no disturbance in the alignment of the images on your web pages.
How to Remove White Space Below the Image Inside Div? – FAQs
Q1. Why does extra space appear below the image inside a
?
You can see the extra space below the image, which is created by the image being aligned to the text baseline.
Q2. How can I fix the extra space below an image?
You can use display: block, vertical-align: top, font-size: 0, or line-height: 0 to fix the extra space.
Q3. Which method is the best for removing extra space?
You can use display: block to remove the extra space, where the image behaves as a block element.
Q4. Does setting font-size: 0 affect other content inside the
?
Yes, it affects other content inside the <div> by removing the font size of the text element.
Q5. Why does line-height: 0 work to fix the gap?
The line height of 0 removes the extra space caused by the default line box in the browsers.
About the Author
Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.