New RCE: Image Padding

[epulham]

The New RCE has an interesting option under Formats > Blocks > Div -- what happens when I select "Div"? I am looking for easy ways to control padding around an image in the new RCE since I can't control CSS (at least I'm under the impression that I do not have that capability). 

What is this there for? What can I do to accomplish the task I want to accomplish?

[KristinL · Accepted solution]

To add padding around an image, I use the HTML editor.

Clemson has a great tutorial: Image Padding: Visual Design in Canvas 

Does this work for you? The little HTML icon is near the bottom of the editing window with the new interface. 🙂

[KristinL · Accepted solution]

To add padding around an image, I use the HTML editor.

Clemson has a great tutorial: Image Padding: Visual Design in Canvas 

Does this work for you? The little HTML icon is near the bottom of the editing window with the new interface. 🙂

[epulham]

Thank you! I kept trying to find the right syntax for the style tag in HTML. 🙂 

[patty_hendricks]

The Clemson tutorial is behind a firewall. Can someone add the code?

[KristinL · Accepted solution]

from : https://clemson.instructure.com/courses/12011/pages/image-padding

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;"

[JacquelineHuynh]

Thanks Kristin.

Is there a way to apply this to cascade on all images that introduced?

[Chris_Hofer]

@JacquelineHuynh ...

To my knowledge, there isn't any way in the Canvas UI (User Interface) to apply image padding to multiple images across the board.  You'd need to apply the padding to each image individually...in each content page.