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.