CSS Margins

CSS Margins are nearly identical to the CSS Padding attribute except for one important difference: a margin defines the white space around an HTML element's border, while padding refers to the white space within the border. Setting the actual value of margin is just the same as with padding, so you can probably zip right through this lesson.

Please see the example below for a visual representation.

CSS Code

p{margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}

How It Looks

There are several ways to go about defining the css margin attribute. We will show you how they are done with the most common ways and let you decide which methods are the best for you.

You will also notice we have added a border of 1pixel around each element, that way you can visibly see the difference with the margins.

SINGLE VALUE

So as we showed you in the example above, margin can be uniform outside an element. Specifying one value will create a uniform margin on all sides: top, right, bottom, left. In addition to using exact values, you may also define the margin with the use of percentages.

CSS Code

p {margin: 2%; border: 1px solid black; }
h5{margin: 5px; border: 1px solid red;} 

How It Looks

MARGIN DIRECTIONS

Each HTML element has 4 different margins: top, right, bottom, and left. It is possible to define each of these individual margins easily by adding a direction suffix on to the margin attribute. Example form: margin-(direction). Defining only one direction will leave the other 3 margins untouched.

CSS Code

p { margin-left: 5px; border: 1px solid black; } 

h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; } 

How It Looks

MULTIPLE VALUES

Four margin values can be declared at once by either specifying two or four values. When only using two values, the first will define the margin on the top and bottom, while the second value will define the margin on the left and right.

When you are using the 4 value margin specification, remember that the corresponding directions to the values are: top, right, bottom, left. So to help you remember what the order is, just remember that it starts at the top (12 o'clock) and then moves clockwise until it reaches the left (9 o'clock). The examples below shows partial(2) and complete(4) margin usage.

CSS Code

p {margin: 5px 15px; 
border: 1px solid black; } 

h5{margin: 0px 5px 10px 3px;
border: 1px solid red;} 

How It Looks

There are a few other dimensions you can use for setting the margin, in (inches), mm (millimeter), cm (centimeter) & pt (point) among a few. But the most commonly used and recommended would be px, its more precise in positioning and supported by more browsers.