Sprint 2 - Technical Blog

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

This blog post will highlight the differences between the three and give a brief demonstration on how to use them.

What is the border?

A border is simply an outline around your content or element. You can change the style, width, color or radius in CSS. The border doesn't change the dimensions of the element.

For this example I will be using a div but the same applies to any other element.

What is padding?

Padding is the first layer of space between your actual content and border. It is applied to the inside of your element hence effecting how far your element's content is away from the border.

Below is an example of padding around some content. Notice that with the padding now applied, the border is pushed further away from the content.

(Padding is transparent but for this example it will be blue).

So what is the margin?

Margin is applied to the outside of your content and affects how far away your element is from other elements. It doesn't alter the elements dimensions unlike padding which increases them. For example - 10px padding-top to a Div with 100px height will make the element 110px tall.

(Margin is also transparent but for this example it will be orange).