How to get rid of the gap under the image ?
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:
- Using the display property
- Using vertical-align property
- Using line-height property
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 = "https://media.w3wiki.net/wp-content/uploads/20220111163542/gfg.png" alt = "GFG_img" > </ div > </ body > </ html > |
Output:
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 = "https://media.w3wiki.net/wp-content/uploads/20220111163542/gfg.png" alt = "GFG_logo" > </ div > </ body > </ html > |
Output:
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 = "https://media.w3wiki.net/wp-content/uploads/20220111163542/gfg.png" alt = "GFG_logo" > </ div > </ body > </ html > |
Output:
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 = "https://media.w3wiki.net/wp-content/uploads/20220111163542/gfg.png" alt = "GFG_logo" > </ div > </ body > </ html > |
Output: