[Resolved] Add spacing around images on an individual basis

Home Forums Support [Resolved] Add spacing around images on an individual basis

Home Forums Support Add spacing around images on an individual basis

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2143787
    Mario

    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,
    Mario

    #2143803
    Leo
    Staff
    Customer 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 🙂

    #2143914
    Mario

    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,

    #2143962
    Leo
    Staff
    Customer Support

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

    It would be very helpful 🙂

    #2144613
    Mario

    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

    #2144650
    Leo
    Staff
    Customer Support

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

    Can you confirm?

    #2144859
    Mario

    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,

    #2144900
    Fernando
    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 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. 🙂

    #2145342
    Mario

    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,

    #2145353
    David
    Staff
    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.

    #2145880
    Mario

    Ok, guess thats the only way….

    Thanks,

    #2146412
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.