How to Create Padded Images

Padding Images

When we talked about boxes, we touched on "padding." Padding is like margins; they add space between objects on a content page. If we add images, we want a gap between the image and, for example, text included on the page.  

Illustration of a newspaper hawker. Text added with no padding. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 

In the image to the left, you can see that the space between the image and the text placement is very small. This can make a page look cluttered and can impede reading.  

Illustration of a newspaper hawker. Text added with 30 pixel padding on the left, right, top and bottom. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

With the padding added to the image to the left, you can see a more comfortable margin of space is present. The text is shifted away from the image, making the page easier to read and look cleaner.  

 

Using HTML to Add Padding

To add padding to an image, you'll need to navigate to your Canvas page and:

  1. Click Edit
  2. Switch to HTML Editor
  3. Locate the HTML code for the image(s) you'd like to adjust
    • Using Control+F or Command+F to search for <img may make this process easier
  4. Locate the image's style attribute; if the image doesn't have one, you can add one by typing style="" after img
  5. Within the quotation marks, add padding: 10px;. If there is another style attribute, separate them with semicolons (e.g. style="padding: 10px; float: right;")
  6. Switch to the Rich Content Editor and select your image; you should be able to see a 10-pixel border around the image.

Selective Padding 

In the instructions above, a 10-pixel border is added to the image on all sides. However, you can add padding selectively by using padding-bottom, padding-left, padding-right, and padding-top. Here are a few examples:

  • style="padding-left: 10px; padding-bottom: 20px;"
  • style="padding-right: 20px; padding left: 20px;"
  • style="padding-top: 15px;"

Practice

  • Open a blank content page and switch to the HTML editor. 
  • Copy the code included above into the HTML editor. You can change the colors or numbers. 
  • Switch back to "rich text editor" and see what your changes have done. 
  • Add the sample code to the note page app on your computer or a reference page on Canvas. You can copy/paste the sample code anytime you need it. 

This concludes this module. You can return to this guide whenever you need the code.