Q:

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

mhmadesk
Save to bookmark
|
2022-05-17
|
  707 
Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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-box1, .img-box2{
        width: 125px;
        border: 4px solid #333;
    }
    .img-box2 img{
        display: block;
    }
</style>
</head>
<body>
    <h3>Default Behavior</h3>
    <div class="img-box1">
        <img src="/examples/images/club.jpg" alt="Club Card">
    </div>
    <br>
    <h3>After Changing Display Property</h3>
    <div class="img-box2">
        <img src="/examples/images/club.jpg" alt="Club Card">
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now