Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove extra space below the image inside div?
To remove extra space below the image inside div, we can use CSS. Images are treated as inline elements by default, which creates unwanted space below them due to text baseline alignment. The following CSS properties can be used to eliminate this space
- The
vertical-alignproperty - The
line-heightproperty - The
displayproperty
The extra space occurs because browsers reserve space for descenders (like g, j, p, q, y) in text, even when no text is present. This creates a gap between the image and the bottom of its container.
Using the vertical-align Property
The vertical-align property controls how inline elements align with the text baseline. By default, images use baseline alignment, which creates the unwanted space.
Syntax
img {
vertical-align: value;
}
Common values for removing extra space
- top Aligns the top of the image with the top of the line
- bottom Aligns the bottom of the image with the bottom of the line
- middle Centers the image vertically within the line
Example
Following example demonstrates removing extra space using vertical-align: bottom
<!DOCTYPE html>
<html>
<head>
<title>Remove Extra Space - Vertical Align</title>
<style>
.container {
width: 300px;
border: 3px solid #333;
margin: 20px 0;
}
.container img {
width: 100%;
vertical-align: bottom;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Image with No Extra Space</h2>
<div class="container">
<img src="https://via.placeholder.com/300x150/4285f4/ffffff?text=Sample+Image" alt="Sample">
</div>
<p>The image fits perfectly within the container with no gap at the bottom.</p>
</body>
</html>
The output shows the image fitting perfectly within the container
Image with No Extra Space [Image perfectly aligned within bordered container] The image fits perfectly within the container with no gap at the bottom.
Using the line-height Property
The line-height property controls the height of text lines. Setting it to 0 eliminates the space reserved for text descenders.
Syntax
.container {
line-height: 0;
}
Example
Following example removes extra space using the line-height property
<!DOCTYPE html>
<html>
<head>
<title>Remove Extra Space - Line Height</title>
<style>
.container {
width: 300px;
border: 3px solid #e74c3c;
line-height: 0;
margin: 20px 0;
}
.container img {
width: 100%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using Line-Height Method</h2>
<div class="container">
<img src="https://via.placeholder.com/300x150/e74c3c/ffffff?text=Line+Height+Fix" alt="Line Height">
</div>
<p style="line-height: normal;">Line-height is reset to 0 on the container, eliminating the baseline space.</p>
</body>
</html>
The container's line-height is set to 0, removing the extra space
Using Line-Height Method [Image with no gap, fitted within red bordered container] Line-height is reset to 0 on the container, eliminating the baseline space.
Using the display Property
The most effective solution is changing the image's display property from inline to block. Block elements don't follow text baseline rules, eliminating the space entirely.
Syntax
img {
display: block;
}
Example
Following example demonstrates the display: block method
<!DOCTYPE html>
<html>
<head>
<title>Remove Extra Space - Display Block</title>
<style>
.container {
width: 300px;
border: 3px solid #27ae60;
margin: 20px 0;
}
.container img {
width: 100%;
display: block;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Display Block Method</h2>
<div class="container">
<img src="https://via.placeholder.com/300x150/27ae60/ffffff?text=Display+Block" alt="Display Block">
</div>
<p>Converting the image to a block element completely removes baseline spacing issues.</p>
</body>
</html>
The image is now a block element with no extra space below it
Display Block Method [Image perfectly fitted within green bordered container] Converting the image to a block element completely removes baseline spacing issues.
Comparison of Methods
Following table compares the three approaches for removing extra space below images
| Method | CSS Property | Best Use Case | Side Effects |
|---|---|---|---|
| Vertical Align | vertical-align: bottom |
When images need to stay inline | None |
| Line Height | line-height: 0 |
Container with only images | Affects text spacing in container |
| Display Block | display: block |
Standalone images in containers | Images can't be inline with text |
Demonstration - Before and After
Following example shows the problem and all three solutions in action
<!DOCTYPE html>
<html>
<head>
<title>Image Space Solutions Comparison</title>
<style>
.demo-container {
width: 200px;
border: 2px solid #333;
margin: 15px;
display: inline-block;
vertical-align: top;
}
.demo-container h3 {
margin: 5px;
font-size: 14px;
text-align: center;
}
.demo-container img {
width: 100%;
}
.method1 img { vertical-align: bottom; }
.method2 { line-height: 0; }
.method3 img { display: block; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Solutions Comparison</h2>
<div class="demo-container">
<h3>Problem</h3>
<img src="https://via.placeholder.com/200x100/666/fff?text=Default" alt="Default">
</div>
<div class="demo-container method1">
<h3>Vertical Align</h3>
<img src="https://via.placeholder.com/200x100/4285f4/fff?text=Method+1" alt="Method 1">
</div>
<div class="demo-container method2">
<h3>Line Height</h3>
<img src="https://via.placeholder.com/200x100/e74c3c/fff?text=Method+2" alt="Method 2">
</div>
<div class="demo-container method3">
<h3>Display Block</h3>
<img src="https://via.placeholder.com/200x100/27ae60/fff?text=Method+3" alt="Method 3">
</div>
</body>
</html>
The comparison shows how each method eliminates the extra space, with the first container showing the default spacing problem and the others showing the fixed versions.
Conclusion
The most reliable method to remove extra space below images is using display: block on the image element. For images that need to remain inline with text, use vertical-align: bottom. The line-height: 0 method works well for containers with only images but can affect text spacing.
5K+ Views
