# Image spacing help

**URL:** <https://forum.freecodecamp.org/t/image-spacing-help/33608>\
**Category:** General\
**Created:** [September 3, 2016, 3:56am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608 "2016-09-03T03:56:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![timmparsons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timmparsons/32/64775_2.png) [@timmparsons](https://forum.freecodecamp.org/u/timmparsons)\
**Post date:** [September 3, 2016, 3:56am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608/1 "2016-09-03T03:56:47Z")

</div>

Is there a way I can group the 3 pictures together so they all move together and keep the spacing?

I’d like to move them up too, so they’re closer to the paragraph writing and then have the footer just a little below the pictures. Any suggestions? [http://codepen.io/timmparsons/pen/yaBjKx](http://codepen.io/timmparsons/pen/yaBjKx)

Thanks

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [September 3, 2016, 4:03am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608/2 "2016-09-03T04:03:53Z")

</div>

You can try wrapping them in a flex container.

```html
<div class="flex-container">
  <img>
  <img>
  <img>
</div>

```

```css
.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-container img {
  margin: auto;
}

```

> [@timmparsons](#):
>
> I’d like to move them up too, so they’re closer to the paragraph writing

Try removing the `height: 400px;` (or reduce its value) in `.body-p`

---

<div class="post-metadata">

**Author:** ![timmparsons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timmparsons/32/64775_2.png) [@timmparsons](https://forum.freecodecamp.org/u/timmparsons)\
**Post date:** [September 3, 2016, 4:16am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608/3 "2016-09-03T04:16:10Z")

</div>

What does the flex do? I’ve added it and not seen any changes.

Reducing the body.p height helped though, thank you

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [September 3, 2016, 4:24am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608/4 "2016-09-03T04:24:36Z")

</div>

Hmm that’s weird. It worked when I tried it. I added those CSS rules at the end of the CSS section.

It should look like this (and the images are nicely spaced) (the dashed lines mark the boundaries of the `.flex-container`)

 ![](https://global.discourse-cdn.com/freecodecamp/original/2X/a/adf211990f71dc2206d9b7e81d0f8088746ffb45.png)

flex is neat for creating layouts and is definitely worth checking out. Here’s [a complete guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 5:29am UTC](https://forum.freecodecamp.org/t/image-spacing-help/33608/5 "2021-01-16T05:29:22Z")

</div>

Closed on January 16, 2021, 5:29am UTC