Margin

The single characteristic you can set for the margin element is size. There are 5 width properties.

The possible values are:

ValuesDescription
margin-top
margin-right
margin-bottom
margin-left
margin


Then possible values for these properties are

ValuesDescription
<length>a fixed width. Only 0 or positive values are valid.
<percentage>specifies the width relative to parent element.
inheritthe property is inherited from the parent.


snippet
<html>
<head>
<style>
p {margin-top:10px;
margin-right:25px;
margin-bottom:20px;
margin-left:50px;
background:#aed7f5;
}

div {margin-top:10cm;
margin-right:1cm;
margin-bottom:2pc;
margin-left:5mm;
background:#f1aef5;}
</style>
</head>
<body>
<p> Never cry for the person who hurts you. Just smile and say, thanks for giving
me a chance to find someone better than you. </p>
<div> Never cry for the person who hurts you. Just smile and say, thanks for giving
me a chance to find someone better than you. </div>
</body>
</html>

margin shorthand
The margin property can accept up to 4 space delimited values.

For example

DeclarationDescription
margin : 1pxtop=right=bottom=left=1px
margin : 1px 2pxtop=right=1px, bottom=left=2px
margin : 1px 2px 3pxtop=1px, right=left=2px, bottom=3px
margin : 1px 2px 3px 4pxtop=1px, right=2px, left=3px, bottom=4px


Note:
Notes
-The values may be positive or negative.
-The properties margin-top, margin-right, margin-bottom, margin-left accepts only one value


snippet
<html>
<head>
<style>
p {margin:10px 25px 20px 50px;
background:#aed7f5;
}
div {margin-top:10cm 1cm 2pc 5mm;
background: #f1aef5;}
</style>
</head>
<body>
<p> Never cry for the person who hurts you. Just smile and say, thanks for giving
me a chance to find someone better than you. </p>
<div> Never cry for the person who hurts you. Just smile and say, thanks for giving
me a chance to find someone better than you. </div>
</body>
</html>
Related Tutorial
2. Padding
3. Margin

4. Border
5. Cursors
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #