Margin vs. Padding

1

How often do front end devs care if the horizontal or vertical spacing of DOM elements is done with margin vs. padding?

The most popular answer on google is here.

Seems like the main thing to consider is that

  1. Margins collapse.
  2. Padding affects click area.

Any other great references on this?

Any tips for changes in how you use margin padding when doing flex layout?

2

Also, don’t forget the obvious where you’re forced to use padding, such as when you have borders or backgrounds and you want space inside the border/background instead of outside.

3

I thought this was a good article and I learned about the lobotomized owl :slight_smile:

margin-or-padding

4

Awesome @flynfish and @robwise! I like the summary in @flynfish’s article:

Margin or padding?

To sum up I am going to leave you with the pen for the above examples and these two rule of thumb I use:

  • Padding: Spacing between the container and its content.
  • Margin: Spacing between elements inside a container.
5

Here are some notes about the topic:

  1. The margins of adjacent flex items do not collapse
    reference

Mozilla’s reference about margin collapsing here

  1. simple, but useful observation (unless you use box-sizing: border-box property) in comments below the mentioned hackernoon article: If you want to make your box bigger without expanding the area that your content contains, then use padding.
6

Why does this make me yearn for the days of the Broken Box Model ?