What is the difference between padding and margin in CSS

In this article we’ll look at the difference between padding and margin in CSS, and how to use each of these features well, as well as the best practices we should follow.

Hey you programmer, okay? Let’s learn something new!

We use margin to space out the content

The padding is used for spacing within the content

The boundary of what is inside or outside is the border

See this clear example represented by an image, which presents the concept of Box Model

Box Model is what we call this HTML structure that composes the layers of an element, from the external to the internal

• Margin;
• Border;
• Padding;
• Element (the element itself);

A practical example would be a button, if we want to internally space it to make it bigger, we’ll add padding

Which will be influenced by the background color of the element.

When we want to separate this button from other elements, we add margin

Which will not receive a background color, that is, the outside of the element

Also remembering that the border is not commonly used for ‘structuring’ content

In other words, enter spacing or fills, rather as a component’s styling

This means that it is also considered in the Box Model, but we must use it for its purpose, which is the elements style or space delimitation

And the element part is controllable via width and height, to increase and decrease its space on the screen

So this is the difference between padding and margin:

• Padding: padding/internal spacing;
• Margin: Outer spacing;

Conclusion

In this article we learned how to differentiate margin from padding, and we also learned about the Box Model

This is the conceptual framework that controls these elements in an HTML project, with the addition of the element itself and the border

So padding is the external padding of the element.

And margin is its outer spacing