How to remove white spaces around img tag?

Question

I can't understand, why I should use display: flex; to get the image stretched for the whole space. Even if I set height of the img tag and for its parent (.hey) to 100%, it won't work and would have white space.

Here's the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body {
            background-color: bisque;
        }
        .wrapper {
            display: flex;
            flex-direction: row;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .hey {
            /* If we won't place display: flex; the image height won't be affected and white space would occur */
            /* display: flex; */
            height: 100%;
        }

        .dance {
            background-color: aqua;
        }

        @media screen and (max-width: 768px) {
            .wrapper {
                flex-direction: column;
            }
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="hey"><img src="./img/blog/blog2.jpg" alt=""></div>
        <div class="dance">
            <h4>Hey</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente rerum aliquid tempora ipsum facere
                neque, sint expedita nihil laboriosam accusantium.</p>
        </div>
    </div>
</body>

</html>

Can you please explain why it works that way?

Youssouf Oumar · Accepted Answer · 2022-06-21T17:30:25.877

You could simply set a display : block on the img like so :

 img {
      display:block;
      /* 
         the lines below is for when you want the image 
         fills its parent also vertically 
         whiteout loosing quality
      */
      height: 100%;
      object-fit:cover;
 }

Your attempt is not working because by default, an img is an inline element, which means width and height set via CSS won't have any effect . Having a display : flex on the parent makes it a flex element, which behaves to a certain point like a block element.

score 0 · Answer 2 · answered Jan 19 '22 at 07:03

img is an inline element. That means you cannot set its width or height. To do that you first need to make it a block or inline-block element, or you could just use display flex and img will now be flex-items. White space is due to margin of p tag

img {
  display: block;
  width: 100%;
  height: 100%;
}

As suggested in a previous answer, you could use this code but it still wont work as you still need to make room for your p tag. You need to first think what you actually want. If you want your p tag to be placed on img then search on this site and there our tons of questions for you. If you want to align them left to right, then use

display: inline-block;
width: 50%;

in both p and img tag. display: flex; is awesome too.

How to remove white spaces around img tag?

2 Answers2