cancel
Showing results for 
Search instead for 
Did you mean: 
egeiserhogan1
Community Participant

Adding a Space between image and text

Jump to solution

Can someone help me add a space between an image and the text? I am struggling with managing tables while building a course and the images I insert always seem to but up against the text. If you can correct this html and then just tell me what you added to insert a small space or two that would be super helpful! Thanks!!

<p><span style="font-size: 12pt;"><br /><img style="float: left;" src="https://palmbeachschools.instructure.com/courses/91/files/22179/download" alt="Image" width="322" height="216" data-api-endpoint="https://palmbeachschools.instructure.com/api/v1/courses/91/files/22179" data-api-returntype="File" />You have probably heard

Elena

3 Solutions

Accepted Solutions
kblack
Community Champion

 @egeiserhogan1 ​- Since you seem comfortable with HTML editor, having already done the float property in CSS, another thing you can do is add the padding property.  For example, for an image that is floating to the left, you can add the padding-right property, which will, well....add padding to the right.  (As if the property wasn't clear!)  For example:

img style="float: left; padding-right: 50px;"   [Play around with the number of pixels, of course!]

As you begin diving in the world of HTML/CSS in Canvas, just as a heads-up you would do well to check this page: How do I use the HTML view in the Rich Content Editor? and more importantly download the PDF that it links to, the Canvas HTML Whitelist, which lists all HTML as well as CSS properties that can be used in the rich content editor in Canvas.

Hope this helps.

View solution in original post

egeiserhogan1
Community Participant

Thanks Chris-

I actually thought of this as a back up plan, but really wanted to know the html code since it will ultimately be a time saver. Thanks so much for sharing though!!

EGH

View solution in original post

egeiserhogan1
Community Participant

Hi Ken-

Thanks for your response and the html for spacing. I am not sure exactly where to place it (in the code I provided in my original post). I was messing around with it and usually I can make it work, but I was not successful this time. Please advise when you have a chance. Thanks!!

Elena

View solution in original post

7 Replies
kblack
Community Champion

 @egeiserhogan1 ​- Since you seem comfortable with HTML editor, having already done the float property in CSS, another thing you can do is add the padding property.  For example, for an image that is floating to the left, you can add the padding-right property, which will, well....add padding to the right.  (As if the property wasn't clear!)  For example:

img style="float: left; padding-right: 50px;"   [Play around with the number of pixels, of course!]

As you begin diving in the world of HTML/CSS in Canvas, just as a heads-up you would do well to check this page: How do I use the HTML view in the Rich Content Editor? and more importantly download the PDF that it links to, the Canvas HTML Whitelist, which lists all HTML as well as CSS properties that can be used in the rich content editor in Canvas.

Hope this helps.

View solution in original post

chofer
Community Coach
Community Coach

 @egeiserhogan1 ​...

I've taken a different approach on this.  Rather than messing with the HTML code, I have opened a given image in a graphics editing program (I use Adobe Fireworks) to add some additional white space around the image.  Then, after I save the file, I upload it to Canvas for use in a Canvas page.  The text appears that it's not touching the edges of the image...even though it really is.

egeiserhogan1
Community Participant

Thanks Chris-

I actually thought of this as a back up plan, but really wanted to know the html code since it will ultimately be a time saver. Thanks so much for sharing though!!

EGH

View solution in original post

egeiserhogan1
Community Participant

Hi Ken-

Thanks for your response and the html for spacing. I am not sure exactly where to place it (in the code I provided in my original post). I was messing around with it and usually I can make it work, but I was not successful this time. Please advise when you have a chance. Thanks!!

Elena

View solution in original post

Hi Elena -

That's odd.  You should be able to add that at the beginning, such as what I have here right after the opening <p> tag of page on our site here. But did you add your image to your Images tab in your FILES area?  The reason I ask is now that I look at your source code again, the "data-api-endpoint" that you in yours is usually indicative of a file download rather than an image. Here, for example, is all that I have for an image I uploaded to my FILES area:

<img style="float: left; padding-right: 50px;" src="https://dominicanu.instructure.com/files/41562985/download?download_frd=1" alt="FDR" />

And here is a screen capture of the end result:

sample floating image with padding.jpg

egeiserhogan1
Community Participant

Yes!!! Got it now!!! Thanks. Smiley Happy

Elena

khull
Community Member

From: CSS margin property 

CSS syntax: <img style="margin: 0px 20px">

-K