Spacing

This page shows how to use padding and margin to add spacing to HTML elements.

Important Things to Know

  1. What is white space and why is it important
  2. What is the box model
  3. How to use padding to add space inside the borders of an HTML element
  4. How to use margin to add space outside the borders of an HTML element to space elements out

CSS Properties Back to top

Property Values Description
padding a px value This property sets the space between an element's content and it's border.
margin a px value or auto This property sets the space between an element's border and other elements.

Properties for Individual Sides

Property Values Description
padding-top a px value These properties set the padding on the top side.
padding-right a px value These properties set the padding on the right side.
padding-bottom a px value These properties set the padding on the bottom side.
padding-left a px value These properties set the padding on the left side.
margin-top a px value or auto These properties set the margin on the top side.
margin-right a px value or auto These properties set the margin on the right side.
margin-bottom a px value or auto These properties set the margin on the bottom side.
margin-left a px value or auto These properties set the margin on the left side.

White Space Back to top

Basically, it's the blank areas between other elements on a webpage. This includes the finer detail such as the untouched spaces in the margins, borders, headers and footers, and the gaps between text and images.

Improves Readability

According to Google, it takes visitors just 50 milliseconds to form an opinion about a website. White space is one of the best ways to make a good first impression as it improves the readability and scannability of a website. Used well it can increase readability by up to 20%. That's because the blank areas around blocks of text help guide the visitor through the flow of the site and encourage them to keep reading.

Creates Balance

Once you know what content (text and images) you want on your website, white space can be used to organise everything into a balanced design for an improved user experience.

White space helps give visitors visual clues as to how to process the information. For example, elements that are positioned closely together are considered to be related, whereas elements separated by a lot of white space are believed to be unrelated.

Box Model Back to top

Every HTML element can be thought of as a box. That box is made up of four things:

  1. Content - what is inside the element (text, images)
  2. Border - a line that wraps around the content
  3. Padding - the space between the content and the border
  4. Margin - the space between the border of an element and other elements

Padding Back to top

Padding is the space between the content of an HTML element and it's border.

Examples

Here are THREE paragraphs. The first paragraph has the default amount of padding, 0px.

The other TWO have 30px and 60px of padding respectfully.

p {
  border: 4px solid #2518C5;
}
.pad1 {
  padding: 30px;
}
.pad2 {
  padding: 60px;
}

Individual Sides - Padding Back to top

You can control each individual side's padding in a couple of ways.

Below you will see examples of the TWO ways that you can set different padding values for different sides of an HTML element.

You can use padding with ONE, TWO or FOUR values.

Examples

You can use padding with ONE, TWO or FOUR values like in this example:

th {
  border: 3px solid blue;
  padding: 50px 25px 5px 25px; /* TOP RIGHT BOTTOM LEFT - CLOCK */
}
td {
  border: 3px solid red;
  padding: 5px 25px; /* TOP/BOTTOM LEFT/RIGHT */
}

You can use padding-top, padding-right, padding-bottom and padding-left like in this example:

th {
  border: 3px solid blue;
  padding-top: 50px;
  padding-right: 25px;
  padding-bottom: 5px;
  padding-left: 25px;
}
td {
  border: 3px solid red;
  padding-top: 5px;
  padding-right: 25px;
  padding-bottom: 5px;
  padding-left: 25px;
}

Margin Back to top

Margin is the space between the border of an HTML element and the other elements.

Examples

Here are EIGHT paragraphs. The first TWO are showing the default margin. The default margin for a paragraph is 0px on the left and right sides and 18px on the top and bottom.

The next TWO have 30px on all sides.

The next TWO have 60px on all sides.

The last TWO have 0px on all sides.

You can also see the default margin for the <body> is 8px.

body {
  border: 4px solid red;
}
p {
  border: 4px solid #2518C5;
}
.mar1 {
  margin: 30px;
}
.mar2 {
  margin: 60px;
}
.mar3 {
  margin: 0px;
}

Individual Sides - Margin Back to top

As with padding, you can control each individual side's margin in a couple of ways.

Below you will see examples of the TWO ways that you can set different margin values for different sides of an HTML element.

You can use margin with ONE, TWO or FOUR values.

Examples

You can use margin with ONE, TWO or FOUR values like in this example:

body {
  margin: 40px;
}
h1 {
  margin: 0px 0px 60px 0px; /* TOP RIGHT BOTTOM LEFT - CLOCK */
}
h2 {
  margin: 60px 0px 25px 0px; /* TOP RIGHT BOTTOM LEFT - CLOCK */
}
p {
  margin: 10px 0px 30px 5px; /* TOP RIGHT BOTTOM LEFT - CLOCK */
}

You can use margin-top, margin-right, margin-bottom and margin-left like in this example:

body {
  margin: 40px;
}
h1 {
  margin-top: 0px;
  margin-bottom: 60px;
}
h2 {
  margin-top: 60px;
  margin-bottom: 25px;
}
p {
  margin-top: 10px;
  margin-left: 5px;
  margin-bottom: 30px;
}