What margin & padding taught me after +50 projects

I am proud to say I’ve been working in Front-End for about 4 years now and have created more than 50 projects since I began thanks to Wolox.

Wolox is a company that transforms problems into innovative solutions and ideas into products. Check out our portfolio for more information on the different projects.

Throughout my time at Wolox, I’ve trained many of the new Woloxers who begin working with us. In doing so, I’ve realized most of the newer Front-End developers have a tough time deciding when to use margin or padding. Let’s take a quick look at the box model and discuss some of its properties.

My first question is, where does our component end? Is it after the content? the padding? the border? or the margin?. Let’s suppose you want to build a component that represents a game, something like this image below:

I used to create my components where I included the four box model divisions, but I realized that limits the reusability of the component. In this example, I never told you where I was going to use this component, in a list, a grid, alone in the checkout?.

Does this change everything? Margins are used to separate a component from other components, while the rest of the box model properties affect how the component is presented to the user everywhere. That’s why I think a component ends where its border ends and the margins should be standardized and, in most cases, managed separately from the component’s styles.

On the other hand, we have the padding, a property used to separate the content from its border. That’s what you can see from the box model image I displayed above. But talking about components let’s change “content” to “component elements” and “border” to “component limits”. What you get is that padding is a property used to separate the component elements from the component’s limits.

That’s a lot more accurate considering most of the time the “content” are elements of a component. Going back to our game example, I’ll mark the padding in green:

The second question I’ll be asking is what’s the space that separates the title from the price?

Well, that’s a margin for sure, and although a component ends at the end of its border the elements inside of it can be separated from each other using margins.

At Wolox we define the different types of texts that will appear in an application as components when we start developing. This allows for a lot of re-utilization and isolates the margins from the text styles as well.

Taking a look at the HTML for the previous case:

At this point, we can decide to use a specific class that adds a margin to the bottom of the h3 element or use the game-box-title class. For this case in particular we decided to add it inside the game-box-title since for every game component we will want to use the same kind of separation. Therefore, we will only have to modify the property once if the spacing changes.

The third and final question is, when should we use separate margin classes?

To answer that question I’ll use a complete view as an example. Let’s say we have the typical dashboard that shows a list of games:

The black lines are the borders of the elements so you can imagine which are the paddings here, but the header and the sidebar have some extra spacing at the bottom and at the right respectively which should be done using margins. The game items should use margins too in order to separate themselves from their siblings, so a good way to approach this is to add a class that only specifies the margin and generates the following layout:

The code representing this layout might look something like this:

We can see the m-bottom and m-right classes in the header and aside elements that easily push their siblings, but we didn’t add another class to the game-box. That’s because we define the margin for all the game-box elements that are children of the games-list component since that separation only applies to those specific game-box items.

Conclusion

It’s important to understand where padding should be used and in which cases margin is the right choice. To summarize, padding should be used to separate the limits of a component from its child components while margin should be used to separate a component from other sibling components.

If you have any questions or suggestions about this topic or anything CSS related you can reach me at gabriel.zanzotti@wolox.com.ar