unknown space between images

Question

screenshot of the page I don't know where are those spaces from. I don't add any margin. I use the chrome inspect tool and I still have no idea how to fix that. Thank you so much.

<!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">
    <title>photo blog</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            width: 30%;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <nav>Photo Blog</nav>
    <section id="imageBox">
        <img src="./assets/1.JPG" alt="">
        <img src="./assets/1.JPG" alt="">
        <img src="./assets/1.JPG" alt="">
        <img src="./assets/1.JPG" alt="">
        <img src="./assets/1.JPG" alt="">
        <img src="./assets/1.JPG" alt="">
    </section>

</body>

</html>

Don't break the lines and there will be no space. Check this one https://jsfiddle.net/8nvx5b3j/ — Leo the lion, Nov 01 '21 at 07:19

Yadab · Answer 1 · 2021-11-01T08:29:37.510

As Leo mentioned in the comments. Its due to the line break. It automatically adds an space. To avoid this try using flex.

Example below:

<!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">
    <title>photo blog</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            width: 30%;
            border: 2px solid black;
        }
        section {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <nav>Photo Blog</nav>
    <section id="imageBox">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
    </section>

</body>

</html>

`Display: block` makes images block elements, so they will be posited new lines. — Sato Takeru, Nov 01 '21 at 07:40

score -1 · Answer 2 · answered Nov 01 '21 at 07:47

due to the fact that you want them to be side by side, like in your original demonstration, I made the float: left. Next, because you wanted your images to not have any space between them, so then I added display: block to the img as well, due to the fact that that is supposed to take up the whole section. So after doing both of these, the image will take up the whole new space, and be next to each other.

<!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">
    <title>photo blog</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            float: left;
            display: block;
            width: 30%;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <nav>Photo Blog</nav>
    <section id="imageBox">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
        <img src="https://i.stack.imgur.com/Qtpq8.png" alt="">
    </section>

</body>

</html>

thank you for answer but i did not think this as answer as main question was why gap are coming when no extra css is used. He did not ask to arrange the images in side so this answer is not useful here. — Leo the lion, Nov 01 '21 at 09:19

score -1 · Answer 3 · answered Nov 01 '21 at 07:57

Unknown Space Remove

<!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">
  <title>photo blog</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    img {
      width: 30%;
      border: 2px solid black;
    }
    
    section {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <nav>Photo Blog</nav>
  <section id="imageBox">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
    <img src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-mediumSquareAt3X.jpg" alt="">
  </section>

</body>

</html>

unknown space between images

3 Answers3