This page is about the margin in CSS.
The margin of a box determines the vertical and horizontal distance between two boxes.
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>
This area is transparent. It means that it's not painted for the background.
Margin properties can utilize negative values (padding cannot)
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.
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: