Image Padding

Image padding is just a fancy way of saying, "even spacing around image." This gives a nice balanced look between your images and text.

img style="float: left; padding-right: 30px; padding-bottom: 10px"

 

Without Image Padding 

liezl Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et felis sed velit egestas ultrices. Morbi non dictum purus. Duis commodo ipsum elit, quis blandit lacus pharetra quis. Aliquam erat volutpat. Aenean non urna dui. Sed suscipit rutrum sapien ac iaculis. Sed in orci id est varius ultrices non et quam. In tortor enim, sodales a laoreet at, cursus sodales magna. Sed placerat scelerisque justo, vitae ultrices risus tincidunt eu.

How HTML Coding Looks Like:

<p><img src="https://ccconlineed.instructure.com$IMS-CC-FILEBASE$/Global%20Course%20Images/liezl%20photo.png?canvas_download=1&canvas_qs_download_frd=1" alt="liezl" width="159" height="159" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et felis sed velit egestas ultrices. Morbi non dictum purus. Duis commodo ipsum elit, quis blandit lacus pharetra quis. Aliquam erat volutpat. Aenean non urna dui. Sed suscipit rutrum sapien ac iaculis. Sed in orci id est varius ultrices non et quam. In tortor enim, sodales a laoreet at, cursus sodales magna. Sed placerat scelerisque justo, vitae ultrices risus tincidunt eu.</span></p>

     With Image Padding  

liezlLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et felis sed velit egestas ultrices. Morbi non dictum purus. Duis commodo ipsum elit, quis blandit lacus pharetra quis. Aliquam erat volutpat. Aenean non urna dui. Sed suscipit rutrum sapien ac iaculis. Sed in orci id est varius ultrices non et quam. In tortor enim, sodales a laoreet at, cursus sodales magna. Sed placerat scelerisque justo, vitae ultrices risus tincidunt EU.

      How HTML Coding Looks Like:

<p><img style="float: left; padding-right: 30px; padding-bottom: 10px;" src="https://ccconlineed.instructure.com$IMS-CC-FILEBASE$/Global%20Course%20Images/liezl%20photo.png canvas_download=1&canvas_qs_download_frd=1" alt="liezl photo.png" width="159" height="159" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et felis sed velit egestas ultrices. Morbi non dictum purus. Duis commodo ipsum elit, quis blandit lacus pharetra quis. Aliquam erat volutpat. Aenean non urna dui. Sed suscipit rutrum sapien ac iaculis. Sed in orci id est varius ultrices non et quam. In tortor enim, sodales a laoreet at, cursus sodales magna. Sed placerat scelerisque justo, vitae ultrices risus tincidunt eu.</span></p>

 

 

 



Instructions

  1. Copy the code above. 
  2. In your desired Canvas page, select the HTML Editor.
    • Important note: Canvas' HTML Editor will always scroll to the code that appears at bottom of your page.
    • If you have multiple images, take note where your image is (is it at the very top, middle of the page, or near the bottom?)  
  3. Use the "Find" option in browser
    • MAC: hold down Command & "F" key"
    • PC: hold down CTRL & "F" key" 
  4. When the browser search box appears (usually in the upper right corner of the browser), type "img".
    • The search box will automatically highlight all the text containing "img" for your ease. 
  5. Find your image and highlight the corresponding "img".
    • It might be helpful to locate your image using the search box "img" option and then searching the alt text of your image. Hopefully, you added one - it'll make your life a lot easier when you edit in the HTML Editor view!
  6. Paste the code.
  7. Select Rich Content Editor view to preview your work. If it looks right, quickly save! 

 Note: Code Compatibility with New Rich Content Editor

Unfortunately, this padding code does not appear to work some of the time with the latest rollout of the New Rich Content Editor. 

If you are able to create artificial white space around your desired image, you may use the rich content editor's Align button to apply text wrapping without going into the HTML Editor. Watch this video tutorial on how to create text wrapping using the rich content editor. 

  • Duration
  • 0:59

 

 Interactive directions

Use this immersive iorad tutorial Links to an external site.to learn how to add padding around an image.