Understand margins, paddings, and borders
One of the frequent questions I get asked is about the difference between margins and padding in CSS. How are they different when it looks like they do the same thing? In reality, they are very similar in that they can help add space between an element on your page (an image, text, a <div>, etc.) and other content on the page.
One way to think about it is that margins add space between things. If you want space between two pictures, or a picture and a paragraph of text, then you can do that with a margin. Padding, on the other hand will add space between a border of the content and the content itself. By default an object will have a border right up against it, and the padding will push that border out.
Padding is space between a border and an object
Margin is space outside a border
I may be silly with my example, but I explain these concepts to people as such:
Picture a sofa with a throw pillow. Inside the throw pillow is a little toy panda. I won’t explain why there is a toy panda inside a throw pillow, but it’s there. That panda is the content and the pillowcase is the border. If there is a lot of padding, then it will insulate the pillow and there will be a lot of space between the panda and the pillowcase. Now we get supernatural and we can compare the margin to space outside the pillowcase (border). With a large margin, the pillow will float above the sofa instead of resting on it. If there is a lot of margin and padding, then it will be a fluffy pillow floating in the air. With no margin and lots of padding, it’s a fluffy pillow stuffed with batting resting directly on the sofa. With no padding and a large margin, the throw pillow will have no batting, just a toy panda inside, and it will be floating above the sofa.
Let’s see a few examples in action in a Canvas environment. Note the code used for applying CSS style to each image is described in the captions.
style="margin-right: 20px; margin-bottom: 10px; float: left;"
style="border: 2px dashed orange; padding: 20px; margin: 20px; float: left;"
style="margin-left: 20px; margin-bottom: 10px; float: right;"
style="border: 15px solid red; padding: 10px; margin: 20px; float: right;"
Properties
There are various margins that you can apply to your content:
margin
margin-top
margin-right
margin-bottom
margin-left
If you want the margins to be uniform all around - for example 20px top, right, bottom, and left - then just use the margin property. If you want one side to be a different margin than the others then you will need to define each one.
Padding works much the same:
padding
padding-top
padding-right
padding-bottom
padding-left
Finally, for both margin and padding, you can write out the values on a single line and only determine 2, 3, or 4 values. The values are read clockwise: top, right, bottom, left.
Four values apply to the top, right, bottom, then left.
e.g. style="margin: 10px 5px 10px 20px;"
Three values apply to the top, right and left, then bottom.
e.g. style="padding: 5px 10px 20px;"
This line would have 5px of padding on the top, 10px padding on the right and left, and 20px padding on the bottom.
Two values apply to the top and bottom, then right and left.
e.g. style="margin: 10px 20px;"
This line would have 10px on the top and bottom, and 20px on the left and the right.
Both margins and padding are effective ways to space out your content in Canvas. Sometimes various content just needs a little room to breathe, and simple CSS can remedy the look and feel of your pages and assignments. Knowing how to add margins and padding in Canvas will enhance your courses.
Feel free to visit the Canvas page used for the tutorial video.
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas