CSS Margins

Spacing, or white spacing, is amongst the fundamental concepts of designing. It can reduce the overwhelming effect of content by establishing a breathing area within it and thus make the design visually digestable.

In addition, spacing can also get specific areas of a design stand out comparative to others establishing the effects of emphasis. Not over yet - spacing can also serve to organise related content.

In short spacing is just another vital priniciple to master to be able to build stunning designs. We will go over spacing in design in detail in our Web Designing course. For CSS we'll only see the properties that help us in visually spacing stuff on a webpage.

A margin of an HTML element can be defined as the:

So let's say we have an element p with 20px of margins on all its sides, it would look something like this with the pale orange area denoting the margins.

The element would have an outer spacing of 20px from all its edges, which won't be considered in its final width.

The margin property can be used to do just this thing in CSS - it specifies the margins of an element.

The code below assigns 20px of margins on all sides of the p element - same as the example above.

p {
    margin: 20px;
}

With 50px of margins the result would look something like this:

p {
    margin: 50px;
}

Just specify a single value to margin and margins get applied to all sides of the element. As simple as a cake!

When concerned with margins, sometimes there is a need to have different values for different edges, and this is just where the parameters to the margin property or seperate margin properties come into play.

margin to the rescue

First we'll see how the parameters to margin can be used to give different margins on different sides.

With four parameters the property follows the following pattern:

margin: top right bottom left

The first value denotes the top margin, the second one denotes the right margin, the third one denotes the bottom margin and the last one denotes the left margin.

For understanding this stuff better let's go into some examples.

Give 10px of margins on the right and left sides whereas 100px margins on the top and bottom sides:

p {
    margin: 20px 10px 20px 10px;
}

A 10px top margin, 70px right margin, 50px bottom margin and 0px left margin.

p {
    margin: 10px 70px 50px 0;
}

And you get the idea right?

Apart from four parameters, margin can also just take two parameters following the pattern shown below.

margin: top-bottom right-left

The first value denotes the top AND bottom margins whereas the second one denotes the left AND right margins.

For example the first code snippet in this section which was the following,

p {
    margin: 20px 10px 20px 10px;
}

could've been rewritten to:

p {
    margin: 20px 10px;
    /* 20px top-bottom */
    /* 10px left-right */
}

since the top-bottom and left-right margins were the same - 20px and 10px respectively.

And just one more pattern left to deal with; we can also have three parameters in margin:

margin: top left-right bottom

If we want to keep the right-left margins same and change only the top and bottom ones we could use:

p {
    margin: 20px 10px 50px;
    /* 20px for top */
    /* 10px for right AND left */
    /* 50px for bottom */
}

Here we kept the right-left margins same - only changed the vertical ones.

Seperate sides, seperate properties

Now an important thing for you to know is that margin is just a shorthand property for the four different properties margin-top, margin-right, margin-bottom and margin-left. We can even use these to seperately assign the margins at their corresponding sides instead of just using margin.

A 10px top margin, 70px right margin, 50px bottom margin and 0px left margin.

p {
    margin-top: 10px;
    margin-right: 70px;
    margin-bottom: 50px;
    margin-left: 0
}

Each property deals with its corresponding side. So when do you need this?

A case where these properties can really help is when you want to change the margin of just one side of an element, somewhere later in the stylesheet.

What this means is that instead of doing something like this:

p {
    margin: 20px;
}
/* Some code resides here */
p {
    margin: 20px 20px 20px 0;
}

you just override the left margin using its corresponding property.

p {
    margin: 20px;
}
/* Some code resides here */
p {
    margin-left: 0;
}

However, since margin is way more simpler and shorter than its conjugate properties, it shall be prefered in nearly all cases except for the one shown above.

The different ways margins can be set up using multiple parameters to the margin property are prone to be forgotten easily, in literally the next minute! Therefore here's an intuitive way to remember them.

Let's start with the working of the four parameters.

Picture demonstrating this notion

For example if you want to set-up the margins: 10px top, 20px bottom, 50px right and 30px left you will start at the top position and write parameters as you move clockwise.

div {
    /* top right bottom left */
    margin: 10px 50px 20px 30px
}

A similar working can be used for three and two parameters as well.

For example if you want the margins: 10px top, 20px bottom, 30px left and 30px right, you can simple write:

div {
    /* top right-left bottom */
    margin: 10px 30px 20px
}

Following is the intuition behind the two-parameters working:

For example if you want the margins: 10px top, 10px, 30px left and 30px right, you can simple write:

div {
    /* top-bottom right-left */
    margin: 10px 30px
}

And in this way you might hopefully be able to better remember the flow of the parameters in the margin property. Just remember: start at the top and go clockwise!