Margin in CSS - External Space

Margin is the space between the border of the element and the border of the adjacent element. It is the space between the element and the edge of the container.

In CSS, the margin property is used to specify space around the HTML element. The specified space is transparent and has no background color.

Using this property we can specify the top, bottom, left, and right margin independently. These are four properties of margin.

CSS margin properties

There are four properties of margin in CSS which are used to specify the margin of the element. Also, there is one shorthand property of margin which is used to specify all the four properties of margin at once.

CSS margin values

There are many values that can be used with the margin property. The values can be specified in pixels, percentage, ems, rems, etc.

margin-top

The margin-top property is used to specify the top margin of the element. The top margin is the space between the top border of the element and the margin of the adjacent element.

Increasing the top margin will push the element down and decreasing the top margin will pull the element up.

.box {
    margin-top: 25px;
}

margin-bottom

The margin-bottom property is used to specify the bottom margin of the element. The bottom margin is the space between the bottom border of the element and the margin of the adjacent element.

Increasing the bottom margin will push the next element down and decreasing the bottom margin will pull the next element up.

.box {
    margin-bottom: 25px;
}

margin-left

The margin-left property is used to specify the left margin of the element. The left margin is the space between the left border of the element and the margin of the adjacent element.

Increasing the left margin will push the element to the right and decreasing the left margin will pull the element to the left.

.box {
    margin-left: 25px;
}

margin-right

The margin-right property is used to specify the right margin of the element. The right margin is the space between the right border of the element and the margin of the adjacent element.

Increasing the right margin will push the element to the left and decreasing the right margin will pull the element to the right.

.box {
    margin-right: 25px;
}

margin (shorthand)

The margin is the shorthand hand property for the margin-top, margin-right, margin-bottom, and margin-left properties.

The margin property can have from one to four values.

• If there is only one value, it will be applied to all four sides. For example margin: 25px; - top, right, bottom, and left
• If there are two values, the first value will be applied to the top and bottom, and the second value will be applied to the left and right. For example margin: 25px 50px; - top and bottom, left and right
• If there are three values, the first value will be applied to the top, the second value will be applied to the left and right, and the third value will be applied to the bottom. For example margin: 25px 50px 75px; - top, left and right, bottom
• If there are four values, the first value will be applied to the top, the second value will be applied to the right, the third value will be applied to the bottom, and the fourth value will be applied to the left. For example margin: 25px 50px 75px 100px; - top, right, bottom, left

.box1 {
    margin: 25px 50px 75px 100px;
}

.box2 {
    margin: 25px 50px 75px;
}

.box3 {
    margin: 25px 50px;
}

.box4 {
    margin: 25px;
}

Center an element horizontally

To center an element horizontally, you need to set the margin property to auto for the left and right margins.

For example, to center a div element, you need to set the margin property to auto for the left and right margins:

div {
    margin-left: auto;
    margin-right: auto;
}

div {
    margin: 0 auto;
}

Note: For the margin property to work, the element should be a block element and have a width set.

CSS margin vs padding

The margin property is used to create space around the element, while the padding property is used to create space inside the element.

Both the margin and padding properties can have from one to four values.

Both the margin and padding properties can have negative values.