Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Margin and Padding In Action

Published 20 days ago

Margin and padding are two CSS properties that determine how much space should be between elements. Technically you can use either one to space out a few elements, but when you should use one over the other is where the trickiness in this CSS property lies.

A simple rule of thumb I follow is: If my element has a background color and I want to add some space between the edge of this background color and the elements inside of it, I'll use padding since padding adds space to the INSIDE of an element. I'll also use padding if I want to expand the amount of clickable area on an anchor tag to make it easier for a user to navigate my site's pages.

Margin adds spacing to the OUTSIDE of an element, and is perfect for spacing out elements that don't have any background color applied to them.

You can use both margin and padding in tandem together to get the exact result you want. It may seem a little tricky at first when determining which to use on your own, but do your best to remember the rules above, and I promise it'll get easier and become second nature over time.

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.