How do I add padding around an image?

Updater 4.2 Support

Whenever you insert an image into the content editor, automatically, the text and other elements will hug the image. This tutorial will focus on how to add padding around images in content. You will be able to do this in the content editor window while editing content.

1. Go to edit content by clicking on AcuWeb Menu and choose "Content" from the drop-down list.
2. On the content list view, locate the content you wish to edit and click on the title or the "Edit" icon to continue.
3. Let's assume you are inserting a new image into your content. Click on the Insert/Edit icon and a pop-up window will appear.
4. Click on the Insert/Edit Image button. A pop-up window will appear.
5. From the "Choose an Image" drop-down list, choose an image you want to insert into your content. All the files that are in your file library will appear in this list. Preview the image in the box on the right.
6. Type in a short description in the box. This is the description people will see when they put their mouse over the image in Internet Explorer and other browsers. This is also ideal for search engine optimization as well.
7. Under the image height and width, there is a section for HSpace (horizontal space) and VSpace (vertical space).
8. Type in the boxes a number between 5-20 (you can also go outside these bounderies, however, results may look bad on the web).
   
   
9. When done, click the "OK" button to insert your image.
10. Click the "Save Changes" button at the top of the page to save your changes.
11. Click "Post to Web" to release your changes live to the web.

What if I want my spacing more customized?

If adjusting the HSpace and VSpace boxes are not enough, you may also insert a style to control the image spacing more precisely. Just be sure to remove the HSpace and VSpace values before doing so.

Note: This section is only for those familiar with HTML.

1. To add more customized padding around an image, click on the "Source" button on the content editor.
2. In the HTML code, locate the image tag. It should look something like this:
   <img alt="Image Description" src="/images/yourimage.gif">
3. If your image is aligned right, use something like:
   <img alt="Image Description" src="/images/yourimage.gif" style="margin:0 0 20px 20px;">
4. If your image is aligned left, use something like:
   <img alt="Image Description" src="/images/yourimage.gif" style="margin:0 20px 20px 0;">
5. Feel free to adjust the pixel value in margin style.
6. When done, click the "Source" button on the content editor to see your changes.
7. Click the "Save Changes" button at the top of the page to save your changes.
8. Click "Post to Web" to release your changes live to the web.