Premium Features

Download Video

Margin and Padding In Action

Published 2 years 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.


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.