Deep Tech Point
first stop in your tech adventure

CSS margin vs padding vs border: what is the difference and when to use each?

August 4, 2021 | CSS

We will take you back to the basis of CSS styling. We will dive into CSS margins, padding, and borders. We will investigate what each of these properties means, what are the differences between them, and when should we use each of them. We will start with borders, and then move to margins and paddings, and see what they are all about. We will compare margins vs paddings and we will take a look at when do we typically use margins and paddings.

What is a CSS border?

All elements have borders. They may be hidden or strictly defined as “none”, but basically they are there – they can be on all sides, or just on one side, they can be colored, dotted, dashed, solid, double, rounded, hidden – you name it and you can have it. It’s all about styling – the CSS border properties allow you to specify the style, width, and color of an element’s border.

You can specify the type of border you want to display with a border-style property and that property can have up to four values (for the top, right, bottom, and left border). These are the values that are typically allowed:

We defined for this element not to have a border:

element.none{border-style: none;}

With this element, we defined that every (top, right, bottom, and left) element border is styled differently:

element.mixed {border-style: dashed double hidden dotted;}

We have to define the border-style property, if we want to define other CSS border properties, such as:

We can also define a shorthand property, called border. That property combines the following individual border properties:

An example below shows how to use shorthand property border, where we defined our element’s border to have 1px width, to be dotted and to be blue:

element {
  border: 5px dotted blue;

We didn’t cover all the details regarding styling and defining borders, but we also have to present the border-radius property. It’s a neat property that creates borders with rounded angles. We’re sure you’ve seen it before – it is often used for buttons, and under specific circumstances, it can even create a circle.

What is CSS margin?

In CSS, a margin stands for the space around an element’s border. So, all elements have margins, too. The margin property controls the space around an element, outside of any defined borders. In short, the bigger the margin, the more empty space we have around an element. CSS gives us a very good control over margins, as is the case with borders, we even have margin properties that set the margin for each side of an element (imagine a clock-wise direction):

with the following values:

As with borders, margins too have a shorthand property, simply called margin and stands for the following individual margin properties:

This is an example of a shorthand property margin, where the div element has top margin 10px, right margin 15px, bottom 20px and the left margin is defined to be 25px.

div {
  margin: 10px 15px 20px 25px;

What does it mean when margins collapse?

At the end of the margin section, we also bring out that sometimes two margins can collapse into a single margin that stands for the largest of the two margins. However, this can happen only to the top and bottom margins (not left and right). For example, the first element has a margin-bottom set to 20px, and the following element has a margin-top set to 30px, we could expect the margin between these two elements to be 50px (20px + 30px). But no, due to the margin collapse, the margin between these two elements will be the largest of the two margins, so 30px.

What is CSS padding?

We use padding to add space around the element’s content but inside the defined borders of an element.

As with margins, with CSS, we can control the padding very well, and we can even control the padding for each side of an element (clockwise direction again – top, right, bottom, left) with the following properties:

which can have the following values:

As with margin property, there is also a shorthand padding property which specifies all the padding properties in one property.

What element’s width property has to do with padding?

Since the padding is closely connected to the content (it’s a space between an element’s content and border), it is important to bring out the CSS width property, which defines the width of the element’s content area. But, what’s the element’s content area? Element’s content area represents the space inside the padding, border, and margin of an element.

So, what is the connection between an element’s width and padding? if we specify the width of an element, and then the padding, that padding will be added to the total width of the element. For example, in the example below we have a <p> element with a width of 100px and a padding of 10px on each side:

p {
  width: 100px;
  padding: 10px;

But what really happens with the width of a <p> element is that it ends up being 120px at the end (10px left padding + 100px element width + 10px right padding). Often, this sum is rarely what we really want. If we want to keep our width at 100px, no matter how large we define the padding, we have to use the box-sizing property. However, the available space for the element’s content will shrink, if we increase the padding:

p {
  width: 100px;
  padding: 10px;
  box-sizing: border-box;

Box sizing property

We showed an example of the box-sizing CSS property above, but let’s give it a bit more attention. Box-sizing property is how the total width and height of an element are calculated. We can set the property to be:

So, in terms of border vs margin vs padding:

So margin vs padding?

Here’s a nice visual presentation of the difference between border vs margin vs padding:

What are typical use cases for margins?

Typically we use margins for:

What are typical use cases for paddings?

Typically we use padding for: