CSS Margin
13/03/2023
The CSS margin property is the value of the margins of an HTML element.
<style>
/* 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;}
</style>
<div class="d-flex">
<div class="first-box margin-30"></div>
<div class="second-box"></div>
<div class="third-box"></div>
</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.
<style>
/* 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;}
</style>While specifying the margin values, margin values can be determined respectively up, right, down and left.
<style>
/*
Yukarı 5px
Sağa 10px
Aşağı 15px
Sola 20px
*/
.margin-space {margin: 5px 10px 15px 20px;}
</style>The following structure is used to give the same margin value up-down and right-left.
<style>
/*
Up-Down 5px
Right-Left 10px
*/
.margin-space {margin: 5px 10px;}
</style>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.
<style>
.mt {margin-top: 5px;}
.mr {margin-right: 10px;}
.mb {margin-bottom: 15px;}
.ml {margin-left: 20px;}
</style>