WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

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

Topic: JavaScript / jQueryPrev|Next

Answer: Use the CSS display property

If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

The easiest way to get rid of this problem is to change the default display value of the image from inline to block, i.e. apply the style display: block; on images, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Space Below Images</title>
<style>
    .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>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates