Image inside div has extra space below the image in CSS
Last Updated :
18 May, 2023
Sometimes when you insert an image inside a div element, you might notice that there is extra space below the image. This can happen due to various reasons such as the image having a different aspect ratio than the div, or the div having padding or margin that affects the image placement. In this article, we will discuss different approaches to solving this issue.
Approach 1: Adjusting the Height of the Div: Adjust the height of the div element so that it matches the height of the image. We can set the height property of the div element to the same value as the height of the image.
Syntax:
<div style="height: 200px;">
<img src="image-url" alt="image-description"
style="height: 200px;">
</div>
Example: Before Adjusting the Height of the Div.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example with Adjusting the Height of the Div
</title>
</head>
<body>
<div style="height: 200px; background: green;">
<img src=
alt="placeholder image"
style="height: 150px;">
</div>
</body>
</html>
|
Output: As you can see, there is extra space below the image. To fix this, we can adjust the height of the div element to match the height of the image.
Before Adjusting the Height of the Div
After Adjusting the Height of the Div:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example with Adjusting the Height of the Div
</title>
</head>
<body>
<div style="height: 150px;
background-color: green;">
<img src=
alt="placeholder image"
style="height: 150px;">
</div>
</body>
</html>
|
Output:
After adjusting the Height of the Div
Approach 2: Using the Object-Fit Property: The object-fit property specifies how the content of an element should be resized to fit its container.
Syntax:
<div style="height: 200px;">
<img src="image-url" alt="image-description"
style="height: 100%; object-fit: cover;">
</div>
Example: Before setting the width in Div for Object-Fit Property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example with Using the Object-Fit Property </title>
</head>
<body>
<div style="height: 200px; background: green;">
<img src=
alt="placeholder image"
style="height: 100%; object-fit: cover;">
</div>
</body>
</html>
|
Output:
To fix this, we can set the width of the div element to match the width of the image.
After setting Width in Div for Objective-Property: We have set the height of the div element to 200px and the width to 300px, which is the same as the width of the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example with Using the Object-Fit Property
</title>
</head>
<body>
<div style="height: 184px; width: 667px;">
<img src=
alt="placeholder image"
style="height: 100%;
object-fit: cover;">
</div>
</body>
</html>
|
Output:
Approach 3: Using CSS Properties to Solve the Issue: In addition to adjusting the height of the div and using the object-fit property, you can also use CSS properties to properly align images inside a div element and remove the extra space below the image.
The following CSS properties for resolving this issue:
vertical-align property: The vertical-align property specifies the vertical alignment of an inline or table-cell element. By default, the value of vertical-align is the baseline, which means that the bottom of the element is aligned with the baseline of the parent element.
When an image is placed inside a div element, setting the vertical-align property to the middle can help to vertically center the image and remove any extra space above or below it.
Syntax:
img {
vertical-align: middle;
}
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example with Vertical-Align Property</title>
<style>
div {
height: 200px;
background-color: green;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src=
alt="image-description">
</div>
</body>
</html>
|
Output:
In this example, we have set the vertical-align property of the img element to the middle, which aligns it vertically within the middle of its parent container. This helps to eliminate any extra space that might be present around the image.
Line-Height Property: The line-height property specifies the height of a line of text within an element. It is commonly used with images to adjust the spacing around them within a container.
Syntax:
div {
line-height: 0;
}
Example: Here we are using the above approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example with Line-Height Property</title>
<style>
div {
height: 200px;
background-color: green;
line-height: 0;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div>
<img src=
alt="image-description">
</div>
</body>
</html>
|
Output:
In this example, we have set the line height property of the div element to 0, which eliminates any spacing around the image within the container. We have also set the height of the img element to 100% so that it fills the entire height of its parent container.
Display Property: The display property specifies the type of display that should be used for an element. It is commonly used with div elements to adjust their layout and positioning within a container.
Syntax:
div {
display: block;
}
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example with Display Property</title>
<style>
div {
height: 200px;
background-color: green;
display: block;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div>
<img src=
alt="image-description">
</div>
</body>
</html>
|
Output:
In this example, we have set the line-height property of the div element to 0, which eliminates any spacing around the image within the container. We have also set the height of the img element to 100% so that it fills the entire height of its parent container.
Share your thoughts in the comments
Please Login to comment...