Add spacing around images on an individual basis

Hi there,

Can you link us to the page in question and maybe an example of what you are trying to achieve?

Let me know :)

Linking to a page wouldn't be very helpfull i think. I want to add padding to the right of an image that is left aligned

The goal is to create more space between an image and the text to the right of the image.

Thanks,

Linking to a page wouldn’t be very helpfull i think.

It would be very helpful :)

Good day Leo :)

I placed an image inside a container and left aligned both the image and the container. I also added padding to the right of the container to create more space between the image and the text to the right of it.

You can find it on this url - https://www.lovingmeow.com/why-do-cats-like-to-lay-on-paper/

It is the image right underneath point number 5 which is ironically called - A Love of Enclosed Spaces

I added 100 px of padding, but the spacing between the image and the text remains the same no matter how much padding i add.

Maybe i'm doing it wrong?

Thanks,
Mariio

Hmm I'm not seeing any special padding added on that image:
https://www.screencast.com/t/tqZOokoV

Can you confirm?

I cleared cache on Cloudflare but it turns out that the host (cliudways) used their own caching as well. I cleared it now. Can you take another look?

Thanks,

Hi Mario,

Here is a reference as to why the padding is not working on the WP core Image Block: https://stackoverflow.com/questions/5013683/css-float-and-padding#:~:text=When%20you%20float%20an%20element%2C

In essence, since you’re aligning the image left, it floats left which puts it out of flow, and makes padding rules ineffective.

To resolve this, we can add a custom class to the images you wish to add spacing to the right to, and add a custom code like this:

.wp-block-image.add-my-margin-right > figure {
    margin-right:50px;
}

Kindly see: https://share.getcloudapp.com/Z4u7eedr

As shown, I added add-my-margin-right class to the WP Image Block, and added margin-right instead. Please replace 50px with you preferred spacing value.

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! Kindly let us know how it goes. :)

Hi Fernando,

Thanks for the offered solution. I can use this as a general setting to create more spacing to the right of images i add the tag to.

Unfortunally it wont give me the control i am looking for. What i need is a way to add spacing around in content images on an individual basis. So, in a single post i might have 5 in content images with one of them having 30 px on top and 20 on the bottom. Then another might need 45 px at the top and 30 px to the left... etc

I need to add custom spacing to each of the images seperately...

Thanks,

Hi there,

you would have to repeat what Fernando provided - each time creating a different CSS class for the various margins you want to add. Then just apply those custom classes to the blocks that need it.

Ok, guess thats the only way....

Thanks,

You're welcome