Margin or padding?
Philipp Sporrer
54526

This example actually doesn’t explain the use of margin and padding very well. It’s more about CSS selectors than the difference between margin and padding. Padding extends your box model out from the content. Borders and box shadows are positioned outside the padding. Margin provides spacing outside the edges of those borders.

To add spacing outside the edge of your box model (such as between cards), then you want to use margin. Margin is generally used to provide transparent space between two or more elements. The margin spacing is added outside of the padding & border. Padding on the other hand extends your box, so things like your background color get extended with padding, but not with margin. If you want to make your box (your card in this example) bigger without expanding the area that your content contains, then you use padding. So adding padding around your content will give that breathing space around the content so your content isn’t reaching all the way to the edges of your card.

The most important concept to understand when learning CSS is the box model. I recommend googling “CSS box model” to see how padding and margin truly work.

As a side note I’d be extremely cautious using the lobotomized owl in any production site. Effecting any element that precedes any other element is extremely sketchy, unless it’s maybe nested inside a more specific selector first. Just doing it as explained in this post could have crazy unexplained effects throughout any website.

With CSS you want to always favor specificity, unless you find that you are repeating yourself with similar styling, only then you want to open up the scope for those styles to prevent repeating yourself.

I’m not writing this to be critical, but just to inform those that find this article about some of the truths that are construed in this article.

Like what you read? Give J. Alexander Curtis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.