Margin

You may know the concept of margins from your word processing application, e.g. Microsoft Word, where you can define how wide and tall the margins should be, as in how much space you want from the edge of the page and into the actual content. Margins in CSS work just like that - they allow you to put a bigger distance between your elements by specifying the desired margins. Put another way, the margin is an outer, invisible border around your element.

The default value for the margin properties is auto, which usually translates to zero. However, for some elements, the browser will likely choose to add a certain amount of pixels to the margin, which you may of course override if you want to. A good example of this is the header elements (h1-h6), the body tag and paragraphs - all of these usually have margins added to them by the internal stylesheet of the browser. This is why you will often see user stylesheets setting the margin to 0 - they are overriding any margin applied by the browser or other stylesheets.

You can specify the margin(s) for an element by using one or several of the four margin-* properties, named margin-top, margin-right, margin-bottom and margin-left. Here's an example:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
}
</style>

<div class="box">
	Box
</div>

Using the margin shorthand property

While it's perfectly fine to use the margin-* properties, a so-called shorthand property exists, simply named margin. It allows you to define margin values for all four sides, without having to repeat all the property names each time. The margin property simply directs your values out to the margin-top, margin-right, margin-bottom and margin-left properties, so it's just another way of using the CSS syntax, which will shorten your code in many situations.

The margin property can take from one to four values. This allows you to specify margins for all four sides of an element, but if all four values are the same, you can shorten it to just one value which will be applied to all sides. If you have the same value for top and bottom margin, and another value which should be applied to both the left and right margins, you can just have two values. Confused? Don't be - here's an example where we use all of the mentioned approaches:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
}
</style>

<div class="box" style="margin: 10px 10px 10px 10px;">
	Box
</div>

<div class="box" style="margin: 10px 10px;">
	Box
</div>

<div class="box" style="margin: 10px;">
	Box
</div>

Notice how I start with the most verbose way, where I declare all four values, and then work my way down.

But which order should they be in? And how does the various versions work? When specifying margins, the following rules apply:

4 values:

1. [top margin]
2. [right margin]
3. [bottom margin]
4. [left margin]

3 values (not as commonly used):

1. [top margin]
2. [left/right margin]
3. [bottom margin]

2 values:

1. [top/bottom margin]
2. [left/right margin]

1 value:

1. [top/right/bottom/left margin]

Relative margins

A lot of margins will be specified in absolute values (usually pixels, like we saw in the first example), but just like most other size related CSS properties, you may also use relative values. This is usually done by either using a relative size unit, for instance the em unit (1 em equals the size of the current font), or simply by specifying a percentage-based value.

In the next example, I have specified a common margin of 1em, and then I have applied a different font-size, measured in em's, for each of the three boxes:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin: 1em;
}
</style>

<div class="box" style="font-size: 1em;">
	Box
</div>

<div class="box" style="font-size: 2em;">
	Box
</div>

<div class="box" style="font-size: 3em;">
	Box
</div>

Now if you try to run this example, you will notice that even though the boxes share the same actual margin value, the margin is now relative to the font-size, meaning that it grows when the font-size is increased. This is useful in many situations!

Negative margins

So far, we have only used positive margins but you can just as easily use negative margins. This can be utilized to pull an element closer to another or to negate the effect of padding. Now, padding will be explained in the next chapter, but since we'll be using it in the next example, just think of it as an internal margin - space reserved inside of the element, instead of outside like margins.

To illustrate it, have a look at this example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
}
</style>

<div class="box">
	<div class="box-header">
		Header
	</div>
	Hello, world!
</div>

This is a common usage, where we have a box with some text in it, with a header in a different color. A box like that may be used in many places on a page, and in all cases, we would likely add some padding to it, to keep text and content away from the edges of the box.

However, we may want to make an exception for the optional header and let that one go all the way to the edges of the box. We would probably also like to have some distance from the header and down to the following content and all of this can be solved with a proper margin declaration:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
	margin: -10px -10px 10px -10px;
	padding: 5px 10px;
}
</style>

<div class="box">
	<div class="box-header">
		Header
	</div>
	Hello, world!
</div>

We simply use a combination of negative and positive values for the margin property to adjust the position and compensate for the padding in the parent element.

Summary

Margins are used to adjust empty space between elements, something that is very useful for creating designs that are spacious and easy on the eye. Some elements do come with built-in margins (usually dictated by the browser), but you are always free to define your own margin values, either to decrease or increase them or to simply reset them to zero.

Margins are defined in absolute (pixels) or relative (percentage or relative units) sizes and they can be both positive or negative to push or pull an element away or towards other elements.