- This topic has 11 replies, 4 voices, and was last updated 4 years ago by
.
-
Posts
-
Hi,
I want to add spacing (padding or margin) around images. I know there is CSS for this but that will probably apply tp all images..
I want to be able to only add spacing when its needed.What i tried sofar is putting the image inside a container and then add padding around the container.
This seems to work to create spacing on the top, at the bottom and to the left of an image. Strangely enough, it does not seem to work for creating space to the right of the image/container.
To be specific. I place an image block inside a container… I both align them left (this will pull text from beneath the image to the right of the image, which is what i want)
Now i add padding to the right of the container to create more space between the image and the text to the right of it. That doesnt work.
Am i doing it the right way? Is there an easier/better way? a plugin perhaps?
Thanks,
MarioCustomer Support
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,
MariioHmm I’m not seeing any special padding added on that image:
https://www.screencast.com/t/tqZOokoVCan 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,
Customer Support
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 classto the WP Image Block, and addedmargin-rightinstead. Please replace50pxwith 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,
Customer Support
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
- You must be logged in to reply to this topic.
