How to remove the extra white space underneath an image using CSS?

How to remove the extra white space underneath an image using CSS?

Asked on October 31, 2018 in HTML / CSS.
Add Comment


  • 2 Answer(s)

          By applying CSS display:block; on images,the extra white space underneath an image can be removed.

          The image inside a <div> element, there wil be a extra white space (around 3px) at the bottom of image.
    This is because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

        The best way to avoid this problem is to change the default display property of the image from inline to block,
    For example :

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Remove White Space Below Images</title>
    <style type="text/css">
        .img-box{
            width: 125px;
            border: 4px solid #333;
        }
        .img-box img{
            display: block;
        }
    </style>
    </head>
    <body>
        <div class="img-box">
            <img src="images/club.jpg" alt="Club Card">
        </div>
    </body>
    
    Answered on October 31, 2018.
    Add Comment

    You’re seeing the space for descenders (the bits that hang off the bottom of ‘y’ and ‘p’) because img is an inline element by default. This removes the gap:

    .youtube-thumb img { display: block; }
    Answered on February 24, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.