Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to get rid of the gap under the image ?

  • Last Updated : 16 Jan, 2022

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 div and the image inside it.

Example:

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=
             alt="GFG_img">
    </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.

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.

Display Property: The most commonly used solution is used to change the display property of the <img> tag inside the <div> container from 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=
            alt="GFG_logo">
    </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=
             alt="GFG_logo">
    </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=
            alt="GFG_logo">
    </div>
</body>
  
</html>

Output:

Using line-height property


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!