CSS Tutorials : Lesson 8 : CSS Margin

CSS Tutorials : Lesson 8 – Margin

In this tutorial you will learn about Cascading Style Sheets (CSS) Margin and Using the shortcut.

The margin is the space around the element from the four sides, the margin attributes enables you to increase or decrease this space; the space can be a negative value, which may make elements overlap.

Using margins is very easy and straight forward, to declare the margin you can use the following properties:

margin-top, margin-right, margin-bottom, and/or margin-left.

The values of these properties can be an absolute length, a percentage.

Example:

.margins
{
margin-top: 5px;
margin-right:10px;
margin-bottom: 5px;
margin-left: 12px;
}

This will set the top margin of any HTML element that uses this class to 5 pixels, the right margin to 10 pixels, the bottom margin to 5 pixels, and the left margin to 12 pixels.

Using the shortcut

A shortcut property can be used to set all the margins in one declaration; the property is “margin”, and the order is:

margin-top, then margin-right, then margin-bottom, and finally margin-left.

Example:

The previous example can be written as:

.margins
{
margin: 5px 10px 5px 12px;
}

This will cause the same effect as the previous example.

You can use from 1 to 4 values for the “margin” property, and the browser will assign a value for each side the same way as in borders.