How to lower horizontal set of images

[lpinilla]

Hi, I'm trying to put a title with 3 images side-by-side below it.

I can get it working with the following:

---
# Title

![bg horizontal w:300 h:300](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
![bg w:300 h:300](https://fakeimg.pl/800x600/02669d/fff/?text=B)
![bg w:300 h:300](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)
---

But the results I get are the following, the images are centered and cover the title.

So I was trying to lower the images. I've tried playing around with the top and bottom paramaters inside the [] on the images but had no luck. I wanted to know what am I doing wrong or how could it be done.

Thanks!

[yhatt]

Simply use inline Markdown images instead of background images (bg). Put image syntaxes in a line to align images side-by-side.

# Title

![w:300 h:300](https://fakeimg.pl/800x600/0288d1/fff/?text=A) ![w:300 h:300](https://fakeimg.pl/800x600/02669d/fff/?text=B) ![w:300 h:300](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)

You also can tweak how to layout images by using flexbox through the scoped inline style (https://marpit.marp.app/theme-css?id=scoped-style).

<style scoped>
  p {
    display: flex;
    justify-content: center;
    gap: 30px;
  }
</style>

[lpinilla]

Nice! thank you, another question: when using the images without the bg parameter, I now see a white background instead of the transparent one that the images have, is there something I can do via code to solve this?

[yhatt]

👉 #345