How to Add Margins to Your Product Screen Shots

toggle-button

Many editors like to insert into their reviews screenshots of the products they are reviewing. This is an excellent practice as it makes the review more attractive and informative for readers however getting a blank margin around the image to display correctly can be a little tricky. Here’s how you do it:

 
Left Justified Images
 
The majority of our reviews feature left justified images with the review text wrapped around the image on the right hand side. This is easily done by right clicking the image, selecting “Image Properties” and then selecting “Left” in the Alignment field.
 
The problem is that there will be no margin on the right side of the image between the text and the image just as you can see in the image to the left. If you attempt to fix this by placing a value in the Horizontal space field "HSpace" of the image properties you will end up with a left hand margin as well as a right and this will make your image appear not to be left justified. 
 
The solution is to use the “Advanced” tab in the image properties box and insert a style statement that performs the necessary formatting.
 
The style statement you need to use is as follows:
 
margin-right: 16px; margin-left: 0px; margin-top: 8px; margin-bottom: 8px; float: left;
 
Just copy and paste this statement into the Style field in the Advanced tab of the Image Properties box and your screenshot will have the correct margin on the right hand side.
 
 
 
Right Justified Images
 
With right justified images there is no problem with margins. Just insert 8 in the Horizontal space field "Hspace" of the Image Properties box. This will place an 8-pixel margin on the left and right side of the image but this is not a problem as there is no text on the right hand side of the image.