CSS Margin


The margin property is used to declare the margin between an HTML element and those elements outside of it. The margin can be set for the top, left, right, and bottom of the given element.

Margin Declarations

There are three choices of values for the margin property, which are length, percentage, or auto. Note that if a value is 0, you do not need to add px.

Example

Welcome to Edututorials.com This container with margin proprety.

Margin Shortcuts

A couple of easy shortcuts are available to reduce up to four margin:value declarations into one.

Example

Welcome to Edututorials.com This container with margin proprety.

The order of the values is very important here. The order is top (20px), right (auto), bottom (1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north, east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock, 6 o’clock, and 9 o’clock, the first value being 12 o’clock.

If all four values are the same, the declaration can be shortened even further:

Example

Welcome to Edututorials.com This container with margin proprety.