CSS Margin

0 4683

The CSS Margin used the space around an HTML element and Margin Property is a shorthand property and its used for margin-top, margin-bottom, margin-left, margin-right properties.

Coding Tag explains how to use the CSS Margin and Margin Property.

Check out with below example

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<style type="text/css">
.div_all{margin:25px;}
.div_top{margin-top:15px;}
.div_top{margin-bottom:15px;}
.div_left{margin-left:15px;}
.div_right{margin-right:15px;}
.div{magin:15px 10px 15px 10px;}
</style>

</head>
<body>

<p class="div_all"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class="div_top"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class="div_top"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class="div_left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class="div_right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class="div"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

</body>
</html>