CSS - Margin

About

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

_

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.

Shorthand

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:

Example

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>

Documentation / Reference


Powered by ComboStrap