Margin, Border and Padding

What is the difference between Margin, Border, and Padding?

That is a wonderful question if you, like me, are new to CSS and website designs. Margin and padding are very similar, but they are not quite the same, and there important difference in how to use them.

In CSS, every element in the HTML file is put is a container (like a little box for each element). The limit of this container, as you probably already guessed, is the border. 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. So, the margin property controls the space outside an element, and the padding property controls the space inside an element. Check the image bellow.

Margin

This image represents the margin around the element.

Each element will have a margin that will keep each element on the page away from each other. We can control how far away or close to each of them will be, by adjusting their margin in the CSS file.

Padding

You remember that each element in HTML is put in a kind of container, like a piece of cake on a plate. The margin is the space around the plate. The border is the edge of the plate. and the oadding is the space between the border of the plate and the content (piece of cake). The padding is represented in the image below:

Uses for margins and paddings

We saw that the margins determine how much space there will be in each side of an element. So we can change the value in each side (top, right, bottom, left) to:

• Change an element's position on the page;
• Set the distance between nearby elements;
• Overlap elements.

And since the paddings determine the space inside the element, we can also change those values in each side (top, right, bottom, left) to:

• Add space between the content and its border; and
• Change the size of an element.

Border is the line between the margin and the padding. Every element in a page will always have margin and padding, even if there isn't a visible border. By default, the width of each border is set to 0 (zero), but we can change that with the CSS border property.

How to add margins and padding in CSS

To change the margins of an HTML element we can use the margin property to set the same value in all sides of the element selected. The value can be represented as a fixed length (most commonly px), a percentage (which defines the value as a percentage of the width of it's container) or auto (which lets the browser set the margin). For example, if we want to give all sides of an element a 20px margin, this is what it would look like:

We can also select specific sides of an element and give them different values, using the margin-top, margin-right, margin-bottom and margin-left properties. We can use them individually or use the margin property setting the values for each side, starting from the top and following clock-wise (top, right, bottom, left). Like this:

or like this:

The blue area represents the margin.

To set the paddings of an element is very much like the margin property. The padding property also has four sides that we can select like we showed before with the margins, using the padding-top, padding-right, padding-bottom, padding-left properties.

So, the same element we used to represent the margins before, would look like this with a padding of 20px. Observe that the padding in the red area around the text.

And as we did with the margin property, we can assign different padding values to each side of the element we selected, by following the same convention. See bellow:

It can also be expressed like this:

And both will be read the same way by the browser, showing this:

Again, the values used to determine the paddings, can also be represented as a fixed length or a percentage.

If you'd like to see more information about borders, margins and padding you can check the MDN Web Docs.

Thanks for reading! See ya on the next post. :)

Home