CSS help! Increase distance Text/Pic

[Rigo]

Hello Folks,
Hope everyone had a great Christmas! May the upcoming new year be bountiful for everyone's business!
Anyway been struggling to work out how to increase the distance between a text line and the top of a pic inserted below:


Definitely a fiddler and not a css learnt guy here so any help greatly appreciated.
WP inserted image editing does seem to make it easier to enter some stuff but need to know what to enter ?
Here is some stuff I tried from gleaning off Google (works sometimes ).

<img class="margin:0 20px 20px 20px; position: absolute; display:inline-block; aligncenter wp-image-2973 size-large" src="https://www.cmss.com.au/wp-content/...e-Data-Recovery-Logical-Recovery-1024x693.jpg" alt="Failed Desktop Drive Recovery - Logical Recovery" width="640" height="433" />

Foreign language that someone might be able to decipher and provide some guidance? Definitely not doing anything as is

 

[glennd]

Hello Folks,
Hope everyone had a great Christmas! May the upcoming new year be bountiful for everyone's business!
Anyway been struggling to work out how to increase the distance between a text line and the top of a pic inserted below:

View attachment 11379
Definitely a fiddler and not a css learnt guy here so any help greatly appreciated.
WP inserted image editing does seem to make it easier to enter some stuff but need to know what to enter ?
Here is some stuff I tried from gleaning off Google (works sometimes ).

<img class="margin:0 20px 20px 20px; position: absolute; display:inline-block; aligncenter wp-image-2973 size-large" src="https://www.cmss.com.au/wp-content/...e-Data-Recovery-Logical-Recovery-1024x693.jpg" alt="Failed Desktop Drive Recovery - Logical Recovery" width="640" height="433" />

Foreign language that someone might be able to decipher and provide some guidance? Definitely not doing anything as is

margin is normally what controls the space between an object and what's around it.

is that code above generated by WP? I would expect the class attribute to reference a class name and a style attribute to contain the string i see above. eg <img style="margin: 0 20px 20px 20 ..."

 

[Mick]

There is a WP plug-in called Site Origin CSS - a sort of WYSIWYG editor. You could try it and see if it works. If it does, have a look at the code it generates so you can do it yourself next time.

 

[Rigo]

WP plug-in called Site Origin CSS - a sort of WYSIWYG editor

Thanks folks,
That definitely gave the hint on how to do it. No - It does it for you - Definitely the kind of tool I was looking for. Would I really need to learn CSS with something like that?
img { margin-top: 10px; } in the Image CSS Class did the trick.
Great help!

 

[Moltuae]

position: absolute;

If you're trying to move an image (relative to its natural position), you should use 'relative' instead of 'absolute' and add top/bottom, left/right attributes to shift it by the required number of pixels. However, if you start using positioning, you''ll find yourself having to position everything else on the page the same way. Better to wrap the image in paragraph tags and control the paragraph padding/margins, or simply place a <br> element between objects to create vertical spacing.

 

[Your PCMD]

With margins and padding such as margin: 0 20px 20px 20px; think of it as margin: top right bottom left;

If after you set margins &/or padding it doesn't work, 2 thing's. First, clear your cache and refresh your browser, if after that it still doesn't work, there is a margin/padding CSS code that is over-riding it ABOVE the code your using. You CAN use the following to override any code above it. margin: 0 20px 20px 20px !important;

You should never use a <br /> to create space between anything. If you have to just create space, use a custom div class as such:

<div class="spacer">

CSS:

.spacer { height: 15px !important; }

The reason you don't use <br /> or "break" is although it may (sometimes it doesn't work) create the effect your looking for on a bigger screen, but in mobile view the space is doubled, hence why you need to use @media-screen attributes.

Also, in reference of using aligncenter class (I assume it's a WP CSS code) check to see the value. It should be a margin value like:

.aligncenter {

display: block;
margin: 0 auto;
width: 50%;​

}

Note that it cannot be centered if the width is set to 100% (full-width).