What is the CSS Margin of a Box?

Base

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

• The CSS

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

• The HTML

<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>

• The result:

Horizontal

Horizontal positioning

Transparent Area

This area is transparent. It means that it's not painted for the background.

Negative Values allowed

Margin properties can utilize negative values (padding cannot)

Margin don't add up between boxes (Collapsible)

If the 2 contingent boxes specify the same margin in the same direction, they will not add up.

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.