Skip to main content

A Beginner's Guide to CSS | Part Fifteen - Margins and Padding

Submitted by helen on Thursday, May 26, 2011 - 21:05; Modified on Thursday, August 18, 2016 - 11:11

I've covered margins and padding in a tutorial for my Intermediate and Advanced section, but we've got to the point within this series where you'll need to learn these two properties. Instead of directing you to my Intermediate-Advanced tutorial titled The CSS way to style margins and padding, I decided to write a whole new tutorial dedicated to the topic of margins and padding from a beginner's standpoint. So, let's get going.

Margins

Margins lie around the edges of an element and are used to create space between elements. Unlike padding, margins don't contribute to the width of an element, nor do they take on the background of an element; they are said to be transparent. So, if you add a background to an element, this background will not appear on the element's margins ... which kind of makes sense when you think about it, as margins are all about creating space between elements; how can you create space between elements if the elements' margins aren't distinguishable from the elements themselves?

To add margins to an element, we use the shorthand CSS margin property, or the longhand margin-top, margin-right, margin-bottom and margin-left properties.

Example of applying margins to an element using the longhand properties

You should really only use the longhand properties to either style one margin or to override a margin that was previously set, so as to cut down the size of your CSS file. For the purpose of this tutorial, I will show how to set all the margins on one element so you can see how to use the four properties, but I wouldn't personally advocate this method.

Here, we'll apply margins to two divs. I will also apply a background colour to each div, so you can see the margins in action, creating space around each element.

CSS Code:


div.randomMargins {
  margin-top:10px;
  margin-right:5px;
  margin-bottom:12px;
  margin-left:8px;
  background:#d8f0df;
  width:200px; /* For demonstration purposes */
  height:200px; /* For demonstration purposes */
  float:left; /* For demonstration purposes */
}

(X)HTML Code:


<div class="randomMargins">I am div number one. I have a top margin of 10px, a right margin of 5px, a bottom margin of 12px and a left margin of 8px. You can see these margins creating space around me.</div>
<div class="randomMargins">I am div number two. I have the same margins as div number one.</div>

Result:

I am div number one. I have a top margin of 10px, a right margin of 5px, a bottom margin of 12px and a left margin of 8px. You can see these margins creating space around me.
I am div number two. I have the same margins as div number one.
As you can see, there is a gap between these elements, which is because we have given them margins.

Note — ignore the background, width, height and float property used above; I used them to demonstrate the margins between each element. Incidentally, we will cover floats later.

Example of applying margins to an element using the shorthand property

When adding margins to an element, it is best to use the shorthand margin property, because it takes up less space and is easier to write. You would only really use the longhand properties when you need to set one margin, or you need to override a margin that has been previously set.

The shorthand margin property adds margins in a clockwise direction starting from the top margin and working round to the left margin (kind of like a clock face). In the example below, we will use the shorthand margin property to give a paragraph a top margin of 50px, a right margin of 24px, a bottom margin of 16px and a left margin of 3px.

CSS Code:


p#randomMargins {
  margin:50px 24px 16px 3px; /* This sets the top margin to 50px, the right margin to 24px, the bottom margin to 16px and the left margin to 3px. */
  background:#8ae7bc; /* For demonstration purposes */
}

(X)HTML Code:


<p id="randomMargins">I have a top margin of 50px, a right margin of 24px, a bottom margin of 16px and a left margin of 3px!</p>

Result:

I have a top margin of 50px, a right margin of 24px, a bottom margin of 16px and a left margin of 3px!

The CSS we used above is the same as if we were to say:


margin-top:50px;
margin-right:24px;
margin-bottom:16px;
margin-left:3px;

Several elements have margins by default, such as lists and paragraphs. Sometimes we don't want these margins, so we can use the margin property to remove them.

If we don't want the indent on a list, we can set its margins to zero:


ul {
  margin:0;
}

If we want to remove the space between our paragraphs, we can set their margins to zero:


p {
  margin:0;
}

Three values

Yes, there is a special way to set all margin using three values (this three-value system is applicable for padding as well). You use it when your left and right values are the same but your top and bottom values differ. The syntax is:


margin:[topvalue] [rightand leftvalue] [bottomvalue]

Here is a working example:

CSS Code:


div#marginThreeValues {
  margin:20px 30px 40px; /* This sets the top margin to 20px, the right and left margins to 30px and the bottom margin to 40px. */
  background:#6faa13; /* For demonstration purposes */
}

(X)HTML Code:


<div>I have a top margin of 20px, a right margin of 30px, a bottom margin of 40px and a left margin of 30px!</div>

In this example, we are giving our div a top margin of 20px, a right and left margin of 30px and a bottom margin of 40px.

Result:

I have a top margin of 20px, a right margin of 30px, a bottom margin of 40px and a left margin of 30px!

Padding

Padding is used to create space within an element, say when you want to pad out the contents of an element. Unlike margins, padding takes on an element's background. So, if you apply a background to an element, the element's padding will take on this background. If you don't want that to happen and you want the "padding" to be around the outside of the element, you must manipulate the element's margins instead.

Padding is applied to en element using the shorthand CSS padding property or the longhand padding-top, padding-right, padding-bottom and padding-left properties.

Example of applying padding to an element using the longhand properties

As mentioned above, you should really only use the longhand properties to either style one margin or to override a margin that was previously set, so as to cut down the size of your CSS file. For the purpose of this tutorial, I'll show how to set all the padding values on one element individually, so you can see how all four longhand properties work. But I wouldn't advocate that method.

Here, we'll give two divs various different padding values. I have given the divs a background colour and border, so you can see how the padding effects what is inside each div.

CSS Code:


div.randomPadding {
  padding-top:12px;
  padding-right:3px;
  padding-bottom:17px;
  padding-left:4px;
  background:#c38ae7; /* For demonstration purposes */
  border:1px solid #401088; /* For demonstration purposes */
}

(X)HTML Code:


<div class="randomPadding">I am div number one. I have a top padding of 12px, a right padding of 3px, a bottom padding of 17px and a left padding of 4px.</div>
<div class="randomPadding">I am div number two. I have the same padding as div number one.</div>

Result:

I am div number one. I have a top padding of 12px, a right padding of 3px, a bottom padding of 17px and a left padding of 4px.
I am div number two. I have the same padding as div number one.
As you can see, there is no space between these elements. Instead, the space is applied inside the elements themselves.

Example of applying padding to an element using the shorthand property

As with any all CSS properties, when adding padding to an element it is best to use the shorthand padding property, purely because it takes up less space. You would only really use the longhand properties when you need to set one padding value, or you need to override a padding value that has been previously set.

The shorthand padding property adds padding in a clockwise direction starting from the top padding and working round to the left padding (kind of like a clock face). In the example below, we will use the shorthand padding property to give an h2 element a top padding of 15px, a right padding of 10px, a bottom padding of 25px and a left padding of 2px.

CSS Code:


h2#randomPadding {
  padding:15px 10px 25px 2px; /* This sets the top padding to 15px, the right padding to 10px, the bottom padding to 25px and the left padding to 2px. */
  background:#fbb034; /* For demonstration purposes */
}

(X)HTML Code:


<h2 id="randomPadding">I have a top padding of 15px, a right padding of 10px, a bottom padding of 25px and a left padding of 2px!</h2>

Result:

I have a top padding of 15px, a right padding of 10px, a bottom padding of 25px and a left padding of 2px

The CSS we used above is the same doing the following with the longhand properties:


  padding-top:15px;
  padding-right:10px;
  padding-bottom:25px;
  padding-left:2px;

Three values

We talked about this above, but I'll mention it here just in case you didn't read the section on margins. There is a special way to set all of an an element's padding using three values (this three-value system is applicable for many of the CSS shorthand properties). You use it when your left and right values are the same but your top and bottom values differ. The syntax is:


padding:[topvalue] [rightand leftvalue] [bottomvalue]

Here is a working example:

CSS Code;


div#paddingThreeValues {
  padding:3px 6px 9px; /* This sets the top padding to 3px, the right and left padding to 6px and the bottom padding to 9px. */
  background:#aa3a13; /* For demonstration purposes */
  color:#fff; /* For demonstration purposes */
}

(X)HTML Code:


<div id="paddingThreeValues">I have a top padding of 3px, a right padding of 6px, a bottom padding of 9px and a left padding of 3px!</div>

Result:

I have a top padding of 3px, a right padding of 6px, a bottom padding of 9px and a left padding of 3px!

In this example, we are giving our div a top padding of 3px, a right and left padding of 6px and a bottom padding of 9px.