CODEWITHSUNDEEP
htmlimagecssflexbox
Yerim Kang
Yerim Kang

Reputation: 311

How do I give margin to image using flexbox?

I want the images to have margin, so I wrote the justify-content: space-around but there is no margin between the top images and the bottom images. 

  
#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

Screenshot:

enter image description here

What can I do in this case? Thank you

Upvotes: 3

Views: 743

Answers (3)

kukkuz
kukkuz

Reputation: 42352

I guess what you are trying to do is getting space between the flex lines of the flexbox (see a related issue here if you are interested) - so you can do add these rules:

  1. align-content: space-around to vertically space the flex lines

  2. height: 100% to occupy the height of the portfolio div.

See demo below:

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  height: 100%;
}
<div id="portfolio">
  <div class="portfolio_pic">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
  </div>
</div>

Upvotes: 1

Jerry B. no.1 intern
Jerry B. no.1 intern

Reputation: 534

You could try adding a margin to your images like so

img { margin-top: 15px; }

Or create a class with that style like so, and give each image that class:

.imagesingrid { margin-top: 15px; }
<img class="imagesingrid" src="http://via.placeholder.com/350x300" alt="">

Upvotes: 3

Jan Franta
Jan Franta

Reputation: 1721

Flex is one dimensional. So when you use justify-content: space-around it manage it in defined dimension. row or column. Any reason not giving margin to image element?

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

img {
  margin: 20px;
}  
<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

Upvotes: 2

Related Questions