CSS Topics

CSS Margin


The CSS margin property is the value of the margins of an HTML element.

/* Margin */
.margin-30 {margin: 30px;}

.d-flex {display: flex;}
.first-box, .second-box, .third-box {width: 60px; height: 60px;}
.first-box {background-color: black;}
.second-box {background-color: gray;}
.third-box {background-color: lightgray;}
<div class="d-flex">
<div class="first-box margin-30"></div>
<div class="second-box"></div>
<div class="third-box"></div>

Assigning Different Margin Values ​​to Element Edges

When margin: 30px; value specified to an element, a 30px space will be left on the right-left and up-down edges of the element. Different sizes of spaces can be left for each side.

/* In all three uses below, the same space value is left on the edges. */

/* 1. Usage */
.margin-space {margin: 30px;}

/* 2. Usage */
.margin-space {margin: 30px 30px;}

/* 3. Usage */
.margin-space {margin: 30px 30px 30px 30px;}

While specifying the margin values, margin values ​​can be determined respectively up, right, down and left.

Yukarı 5px
Sağa 10px
Aşağı 15px
Sola 20px
.margin-space {margin: 5px 10px 15px 20px;}

The following structure is used to give the same margin value up-down and right-left.

Up-Down 5px
Right-Left 10px
.margin-space {margin: 5px 10px;}

Assigning a Margin Value to One Side

margin-top, margin-right, margin-bottom and margin-left values ​​can be used to assign a margin value to only one edge of the HTML element.

.mt {margin-top: 5px;}
.mr {margin-right: 10px;}
.mb {margin-bottom: 15px;}
.ml {margin-left: 20px;}