Explain This To Me Like I'm a Project Manager: Padding & Margin

"Can you just add some more padding to this?"
"We need more margin here."
Both are common phrases I hear project managers or designers say when they want extra spacing between components. And honestly, I'm kind of sick of them not knowing the difference and being so nonchalant about it. Especially, those that work in the digital landscape as their bread and butter. Recently, I had a high level task that involved adding CMS controls for padding to every component on an existing production site. There was indeed confusion on terminology. Realizing there was a lack of knowledge, I decided to write about it.

One reason to truly understand the difference is that padding can also change the amount of background color or background image if a component has those properties. Changing margin can change the alignment and positioning of components. Margin is an element’s personal space — how much distance the element wants to keep with other elements around it. Padding is how much an element is away from itself — how much distance an element wants to keep with the elements inside it. In layman's terms, I think of padding as the muscles and tissue of the body while margin is the air between the body and the next object.

The CSS Box Model

To understand margin and padding, a brief introduction to the CSS Box Model is needed. The CSS box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a layered box that consists of the margin, border, padding, and content:

The technically defintion is a bit more complex. In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Consider the element illustrated below, which has a margin of 10 pixels. This means that there will be at least 10 pixels of space between this element and adjacent page elements — the margin “pushes away” its neighbors.

On the other hand, padding is located inside the border of an element. The element below has padding of 10px on the left and right sides, and padding of 15px on the top and bottom sides:

When to Use Margins vs. Padding

When you’re adjusting the layout of your design, you’ll need to determine whether to change the margins or the padding to achieve the desired visual effect. CSS margins determine the space surrounding an element. Therefore, margins can be used to:

• Change an Element’s Position on the Page
• Set the Distance Between Nearby Elements
• Overlap Elements

CSS padding determines how content looks within its respective element. You can change CSS padding to achieve the following effects:

Add Space Between Content and Its Border

• Add Space Between Content and Its Border
• Change the Size of an Element
• Enlarge Spacing of Background Color or Background Image

Padding and margin have two distinct purposes. Padding is used for spacing within an element. Margin is used for spacing between elements. Both certainly have their quirks about them. Understanding these differences, as well as the quirks that come along with them will help you understand when to use padding vs margin.

An effective use of white space is important to ensure focus, readability, hierarchy, and understanding. Without padding and margin, good UI design would not be possible. However, it’s important not to confuse the two. They were never meant to be used interchangeably.