I want the 3rd image of every line to be in the row. how to solve-CodePudding

I have divided the page 3 part and given 30% of width to every Image and the remaining 10% is divided by both sides of every Image that is 6 10%/6 sides. the answer is 1.6666 but the last image of every row isn't in the same row.

img{
  width: 30%;
  margin: 1.6666%;
  }

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">    
    </body>

CodePudding user response：

Use Flexbox like this:

recommendation: go with CSS Grid if you need a gap

/* CSS */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1%; /* Want a gap? Add the gap here. */
}

img {
  width: calc(98% / 3); /* you got 2 gaps @ 1% each. That leaves you with 98% to fill */
}

<!-- HTML -->
<div >
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
    <img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">    
 </div>

This is super simplified. I recommend looking at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for an indepth guide. It will show you how to work with it correctly. I would not recommend styling images directly by their tag, but by their class.

CodePudding user response：

That's due to the fact that the images are inline elements and the linebreaks in the HTML code create a little space in the output.

Apart from the possibility to use other techniques like flexbox or grid to solve this (see other answer), you can avoid this phenomenon in two ways:

1.) put them all into one code line:

img {
  width: 30%;
  margin: 1.6666%;
}

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">

2.) Create HTML comments at line ends and beginnings which "comment out" the linebreaks:

img {
  width: 30%;
  margin: 1.6666%;
}

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">