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
- 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;
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