What is the difference between Margin, Border, and Padding?
The Basics
First things first, it’s important to know that all HTML elements are considered as boxes. And in CSS, this is referred to as the ‘box model’ when talking about design and layout. Let’s take a look at what a basic box model looks like.
Using the above image as our guide, we can identify the four sections of our HTML box model.
We have:
CONTENT – The content of the box, generally where text and images appear
PADDING – The area between the content and the border of the box
BORDER – The border edge of the box
MARGIN – The area between the box’s border and any neighbouring elements
PADDING
Looking at the images above, we can see some text in a yellow box, that has a black border. The difference between these two images is that the top one has a padding of 0 pixels, while the bottom one has a padding of 20 pixels. Notice how in the second box the space between the text and the border is much larger. This is because all around the content (the text) in the box, there is now 20 pixels of padding between it and the border.
This can all be adjusted to specific sides as well if you wish to have a different amount of padding on different sides.
For example:
The padding here has been modified so that there is 30px on the top, 70px on the right, 20px on the bottom, and 40px on the left.
BORDER
Every element has a border, even if not obvious at first. Looking at these images below, we can the same boxes, but the top one has a border set to 0, and the second has a solid black border that is 10 pixels thick.
Styling the border impacts the size of the full box element itself, but doesn’t affect the spacing between the content and the border, or the border and the margin.
Just like padding, you can have different amounts of border on each side of the box. But unlike padding, you can also choose the colour, pattern, or even the shape of the border as well.
Here’s a fun one with a red dashed border on the top and bottom, but a solid green one on the left and right.
MARGIN
The Margin properties of the box element are used to create space around the border. Both of the below images have a margin set to 0.
Now if we add 20 pixels of margin to the second box, we get this:
In the second image the space around the border has had 20 pixels added to it on each side, making the overall size of the box much larger, even though what we actually see stays the same.
Again, just like padding and border, you can adjust the properties for each individual side of the box as well.
NOTE: When you are styling the size of a box element, it’s important to note that you are just styling the 'content' of the box, and not the padding, border, or margin. So when you are styling something, it is important to account for these extras as well.