CSS - Margin

UI - Margin

The margin of a box determines the vertical and horizontal distance between boxes.

• This area is transparent and is then not a part of the background
• margin properties can utilize negative values (padding cannot)

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

margin: margin-top margin-right margin-bottom margin-left;
margin: 10px       10px         10px          10px;

margin: margin-top margin-right-and-left margin-bottom;
margin: 10px       10px                  10px;

margin: margin-top-and-bottom margin-right-and-left;
margin: 10px                  10px;

margin: margin-right-and-left;
margin: 10px

The longhand properties are:

• margin-top,
• margin-bottom
• margin-right,
• margin-left

The margin of a box determines the vertical and horizontal distance between boxes.

.boxLittleMargin {
    margin: 10px 10px;
    background-color: aqua
}
.boxBigMargin {
    margin: 60px 60px;
    background-color: aqua
}

<div class="boxLittleMargin">Box with a little margin</div>
<div class="boxBigMargin">Box with a big margin</div>
<div class="boxLittleMargin">Box with a little margin</div>

• Css 2
• margin
• margin