Adding space around image

  • 1
  • Question
  • Updated 6 years ago
I've inserted a picture into a text box, but the image is too tight against the text. Any ideas on how to increase the spacing between the text and photo?
I tried a previous answer of checking out the HTML and adjusting padding measurements, but I don't see the padding code in the HTML.

Thanks in advance
Photo of Peter

Peter

  • 1 Post
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Peter,

if you add your image to a text widget and then select the image/text configuration which will appear as three icon choices at the far right of the text widget toolbar. Next, open the HTML by clicking the HTML button you will find a padding statement very close to the beginning of the text. By default it is 0 so you can add padding to top bottom, right and left of your image.



for example:

The default may look like this:

<p><img style="margin: 4px; padding: 0px; float: left; font-weight: bold;" src="resources/chinese-lantern.jpg"> Your text.<br></p>

If you wished to add only a 5 pixel padding to the right handside of the image then you would state:
<p><img style="margin: 4px; padding: 0px 5px 0px 0px; float: left; font-weight: bold;" src="resources/chinese-lantern.jpg"> Your text.<br></p>

If you wish to add the same padding all around then it could be a shorthand statement:
<p><img style="margin: 4px; padding: 5px; float: left; font-weight: bold;" src="resources/chinese-lantern.jpg"> Your text.<br></p>

The most authoritative reference for this is: http://www.w3schools.com/css/css_padd...