CSS - Margin
Table of Contents
About
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.
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>