When should I use padding and when should I use margins?
Choosing between padding and margins can be difficult when you are first getting started with CSS, and even when you become a CSS veteran, can still demand careful thought and consideration.
When you start reusing elements and components in different arrangements, you may confront issues like doubled padding, collapsing margins, or a lack of necessary “white space”, all due to first building things in isolation and forgetting how things could flow in different combinations.
So the real conundrums come into play when you need to consider reusability and future design implications, and as always, cross-browser compatibility.
First, let’s keep three things in mind for a consistent overall approach.
This allows us to declare percentage widths on elements, without having to worry about borders or padding adding to those widths. If you follow this approach, you can override it quite easily whenever necessary.
2. Use a "clearfix" class on parent elements when floating child elements
I realize this pattern is fading fast because of flexbox, but make sure you have this class handy if you are using floats.
3. Margins and padding only work on block, or inline-block level elements.
If you are trying to add padding or margins to a
span element, you are going to get frustrated unless you change its default inline display property.
With those three approaches in place, here are some simple mantras I’ve devised over time when choosing padding and/or margins.
Padding on the parent, margins on the minions.
When it comes to HTML elements on a webpage, each one can be (and often is) both a parent and a child simultaneously. So by the above mantra, any element could have both padding and margins on it.
To start, let’s take a look at a very simple example, with one parent and two children.
This is a simple float approach that works in IE8+. Just one container with a clearfix class and padding, plus two child elements floating side-by-side, and a right-side margin on the first child element to separate the two.
Noticing consistent spacing around the inside of the parent element is a great opportunity to use padding, and for spacing the child elements out, just one simple margin.
Margin won’t collapse if margins don’t stack.
Collapsing margins can cause headaches, but you can avoid them if you place your margins on only one, or two non-parallel sides of an element.
If you know a series of components are going to stack vertically in one container, try adding margins only to the bottom of your components or elements for consistent spacing, rather than the bottom and top.
I actually prefer this method for blocks of text, like headers and paragraphs and blockquotes and lists.
Likewise, if you have a grid of items which need to stack both vertically and horizontally, try placing margins on the bottom and right sides only.
To account for last items in a row, which you may not want to have right-side margins, you can either use some nth-child logic, or a class to override.
Here is a little “columns on the fly” Sass (SCSS syntax) mixin I made to automatically take care of spacing things out evenly by just passing in the number of columns and desired spacing between them, along with no margins on the last item in a row by utilizing nth-child logic.
If you want a background to show, padding is the way to go.
Typically with button and navigation items, padding is the desired method to expose a background around the text, while using margins to separate them from their siblings.
From out to in is how you begin.
Try working your way from the outermost element. Notice consistent spacing around the outside and utilize padding on the parent. From there, work on the direct children elements and use margins to space them out. Keep working your way inward and continually ask yourself and the designer(s) you are working with questions such as
“Do these items need to be grouped? If so, can I utilize padding around their perimeter?
Will these possibly include a background in the future? If so, are margins necessary to space them out or will the padding account for all the empty space.”
Over time, this outside-to-in approach will become second nature and you will continually be able to make decisions about padding and margins faster and faster. You will also be able to translate a design into HTML and CSS faster because margins and padding are key CSS properties in translating design.
Keep at it. The more you build, the faster you will be able to decipher when to use padding, margins, or both. Also, take a peak at some other sites to see how they are utilizing padding and margins. The inspector tool will highlight both to give you a quick visual sense of the layout.
It may seem mundain, but mastering padding and margin choices can become a very valuable skill as a front-end developer.