Spacing Between an Image and Text

To add spacing between an image and surrounding text, open the page or item in Canvas, switch to the HTML editor, and add a style attribute to the image code.

If the page contains a lot of content, or more than one image, it can be useful to add a clearly recognisable temporary text just above the image, for example, FINDIMAGE. Then switch to the HTML view in the Canvas editor. The text will be easy to find in the HTML code, especially by using Ctrl+F, and it will help you locate the correct image code. After you have found the correct image code and added the spacing, remember to delete the placeholder text before saving the page.

Space above or below an image

Use margin-top to add space above the image and margin-bottom to add space below it.

<img src="image.jpg" alt="Description of image" style="margin-top: 10px; margin-bottom: 10px;">

Space around an image in one line

You can also define all margins in one command:

<img src="image.jpg" alt="Description of image" style="margin: 10px 0 10px 20px;">

In the code above, the spacing around the image is defined clockwise, starting at the top: top, right, bottom, and left.

margin: top right bottom left;

You do not need to write px when the value is 0.