Margin Properties - CSS
Creating margins in html pages using CSS
How to set margins in a specfic point or percent?
Explanation
Property :
MarginAll the margins (top, right, bottom, left) can be combined using this single tag.
Usage:
margin: 20px;
margin: 10px 20px 30px 10px;
margin: 10px 20px;
margin: 20px 10px 30px;
Definition:
The margin can be set using the tag "margin".
It takes the following values.
a) 20px : This will set a margin of 20px on the four sides (top, right, bottom, left).
b) 10px 20px 30px 10px: This format will set the margin in the order of top,right,bottom,left.
c) 10px 20px : This format will set the margin for top and right. Bottom will take the top margin value (10px) and left will take right margins value(20px).
d) 20px 10px 30px: This format will set the margin for top and right and bottom. left will take the right margins value.
The values can be in percent or points or pixels.
It takes the following values.
a) 20px : This will set a margin of 20px on the four sides (top, right, bottom, left).
b) 10px 20px 30px 10px: This format will set the margin in the order of top,right,bottom,left.
c) 10px 20px : This format will set the margin for top and right. Bottom will take the top margin value (10px) and left will take right margins value(20px).
d) 20px 10px 30px: This format will set the margin for top and right and bottom. left will take the right margins value.
The values can be in percent or points or pixels.
Examples For setting Margins in Percent or Points or Pixels
Example 1:
<div align=right style="margin: 20px;">
Here we have set a margin of 20 pixels.
You can see that this paragraph has margins on all the four sides.
</div>
Here we have set a margin of 20 pixels.
You can see that this paragraph has margins on all the four sides.
</div>
Result:
Here we have set a margin of 20 pixels. You can see that this paragraph has margins on all the four sides.
Example 2:
<div style="margin: 10px 50px 30px 5px;">
Here we have set a margin with four values.
You can see that this paragraph has margin of 10px on top, 50px on right, 30px on bottom and 5px on left.
</div>
Here we have set a margin with four values.
You can see that this paragraph has margin of 10px on top, 50px on right, 30px on bottom and 5px on left.
</div>
Result:
Here we have set a margin with four values. You can see that this paragraph has margin of 10px on top, 50px on right, 30px on bottom and 5px on left.
Example 3:
<div style="margin: 20px 40px;">
Here we have set a margin with two values.
You can see that this paragraph has margins on 20px on top and bottom and 40px on left and right.
</div>
Here we have set a margin with two values.
You can see that this paragraph has margins on 20px on top and bottom and 40px on left and right.
</div>
Result:
Here we have set a margin with two values. You can see that this paragraph has margins on 20px on top and bottom and 40px on left and right.
Example 4:
<div style="margin: 10px 50px 40px;">
Here we have set a margin with three values.
You can see that this paragraph has margins of 10px on top, 50px on right , 40px on bottom. left margin took values from its right counter part as 50px.
</div>
Here we have set a margin with three values.
You can see that this paragraph has margins of 10px on top, 50px on right , 40px on bottom. left margin took values from its right counter part as 50px.
</div>
Result:
Here we have set a margin with three values. You can see that this paragraph has margins of 10px on top, 50px on right , 40px on bottom. left margin took values from its right counter part as 50px.
