Margin adds a space around an element, outside the border. It is different from padding, as
padding is inside the border, margin in outside:
This is an example of Margin
This is an example of normal text
You can add Margin in the following ways:
Margin on all sides
This adds Margin on top, bottom, right and left.A Margin on all sides of 6 units
<div class="margin-Number between 1 to 10">Example of Margin on all sides</div>
Example:
<div class="margin-6">Example of Margin on all sides</div>
Margin on top
This adds Margin on top only.A Margin on top of 6 units
<div class="margin-top-Number between 1 to 10">Example of Margin on top only</div>
Example:
<div class="margin-top-6">Example of Margin on top only</div>
Margin on bottom
This adds Margin on bottom only.A Margin on bottom of 6 units
<div class="margin-bottom-Number between 1 to 10">Example of Margin on bottom only</div>
Example:
<div class="margin-bottom-6">Example of Margin on bottom only</div>
Margin on right
This adds Margin on right only.A Margin on right of 6 units
<div class="margin-right-Number between 1 to 10">Example of Margin on right only</div>
Example:
<div class="margin-right-6">Example of Margin on right only</div>
Margin on left
This adds Margin on left only.A Margin on left of 6 units
<div class="margin-left-Number between 1 to 10">Example of Margin on left only</div>
Example
<div class="margin-left-6">Example of Margin on left only</div>
Margin on right and left (x)
This adds Margin on right and left or on x axis.A Margin on right and left of 6 units
<div class="margin-x-Number between 1 to 10">Example of Margin on right and left</div>
Example:
<div class="margin-x-6">Example of Margin on right and left</div>
Margin on top and bottom (y)
This adds Margin on top and bottom or on y axis.A Margin on top and bottom of 6 units
<div class="margin-y-Number between 1 to 10">Example of Margin on top and bottom</div>
Example:
<div class="margin-y-6">Example of Margin on top and bottom</div>