CSS 101 | Part Fifteen - Margins and padding

• About margins
• About padding

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 round the edge of an element and are used to create space between elements. Unlike padding, margins don't 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'll show how to set all the margins on one element so you can see how to use the four properties, but I wouldn't advocate this method.

Here, we'll give two divs various margins. I have applied a background colour to each div so you can see how the margins work — that they're creating space around each element.

CSS Code:

div.randomMargins {
    margin-top:10px;
    margin-right:5px;
    margin-bottom:12px;
    margin-left:8px;
    background:red;
    width:20px;
    float:left;
}

(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!</div>
<div class="randomMargins">I am div number two. I have a top margin of 10px, a right margin of 5px, a bottom margin of 12px and a left margin of 8px!</div>

Result:

As you can see, there is a gap between these elements, which is because we gave them margins.

Note — ignore the float property used above; it was just an interesting way of demonstrating the margins between each element. We will get to CSS 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 he top margin to 50px, the right margin to 24px, the bottom margin to 16px and the left margin to 3px. */
    background:#8ae7bc;
}

(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:[top value] [right and left value] [bottom value]

Here is a working example:

CSS Code:

div#marginThreeValues {
	margin:20px 30px 40px;
	background:#6faa13;
}

(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:

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 its margins instead.

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

Example of applying padding to an element using the long-hand properties

As mentioned above, you should really only use the long-hand 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 long-hand 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;
    border:1px solid #401088;
}

(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 a top padding of 12px, a right padding of 3px, a bottom padding of 17px and a left padding of 4px!</div>

Result:

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 paddingn 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 tag 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 he top padding to 15px, the right padding to 10px, the bottom padding to 25px and the left padding to 2px. */
    background:orange;
}

(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 long-hand 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 sytnax is:

padding:[top value] [right and left value] [bottom value]

Here is a working example:

CSS Code;

div {
	padding:3px 6px 9px;
	background:#aa3a13;	
}

(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:

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.