CSS Margins

CSS margins are used to create space around the outer part of an element. In this tutorial, we will learn how to add different types of margins to HTML elements and the properties associated with it.

What is CSS Margin?

• A Margin in CSS makes the layout visually appealing by adding extra space between elements.

• You can set the margin for individual sides using properties margin-bottom , margin-top , margin-left and margin-right .

• Negative Margin: A margin with a negative value indicates the elements overlap with each other.

CSS Margins Example

You can try different ways to use to create margins in the below section and you can change the values as well.

Define Margin

To define any margin on any HTML element you can use the CSS margin property . This property is a shorthand property of the ‘margin-top’ , ‘margin-right’ , ‘margin-bottom’ , and ‘margin-left’ properties. A single value will generate a margin all around the element.

Syntax

margin: "value";

Example

As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlighted the margin area with light-green background.

CSS Individual Margin Properties

As we have mentioned earlier the margin is a shorthand property for all Individual sides margin. You can set different margin values for the top, right, bottom and, left sides.

• margin-top : This property is used to set the top margin of any element.

• margin-right : This property is used to set the right margin of any element.

• margin-bottom : This property is used to set the bottom margin of any element.

• margin-left : This property is used to set the left margin of any element.

You can check the attached image for more clarity on individual side margins.

Syntax

The syntax for the CSS individual margin properties is as follows:

margin-top: "value";

margin-right: "value";

margin-bottom: "value";

margin-left: "value";

Example

In this example, we have created four different elements and generated a margin on each element’s individual sides with the above-mentioned properties.

CSS Margin Shorthand Property

There are four ways to provide value to the CSS margin property all of them are mentioned and described below with the complete example code.

• Single Value: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.

• Two Values: For two values, the first value(10px) represents the top and bottom margin while the second value(20px) represents the left and right margin. For example − margin: 10px 20px;

• Three Values: For three values, the first value(10px) represents the top margin, the second value(15px) represents the left and right margin, and the third value(20px) represents the bottom margin. For example − margin: 10px 15px 20px;

• Four Values: For four values, the first value(5px) represents the top margin, the second value(10px) represents the right margin, the third value(15px) represents the bottom margin, and the fourth value(20px) represents the left margin. For example − margin: 5px 10px 15px 20px;

Syntax

The syntax for the margin with single, double, triple, and four values is as follows:

margin: "value" // Single Value

margin: "value value" // Two Values

margin: "value value value" // Three Values

margin: "value value value value" // Four Values

Example

In this example, we have set the margin property of paragraph element with single, double, triple and four values.

Margin Mix up Units

CSS does not restrict the usage of multiple units for specifying the margin value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.

Syntax

The syntax of margin property value with mix-up units is as follows:

h2 {

    margin: 20px 4ex .5in 3em; 

}

Example

In this example, we used different units to specify the margin value.

Using margin With Percentage Value

The margin property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element’s content area.

Example

In this example, we have used a percent value with margin property to set the margin of the paragraph element.

Centering Elements with CSS Margin

To center an element using CSS margin property, we use auto value with margin property.

Example

In this example, we have centered a div element using margin:auto value.

Margin Properties Reference

You can explore more examples of margin properties by visiting the sub-topics listed in the following table: