CSS Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
CSS Topics
css tutorials Introduction
Types Types
Background Properties Background Properties
Text Properties Text Properties
Font Properties Font Properties
Box Properties BOX Properties
Border Properties Border Properties
Margin Properties Margin Properties
Padding Properties Padding Properties
Special Topics Special Topics
Forums Ask Your Doubts
Scraps More about CSS
Feedback Feedback
 




Margin Properties - CSS


Tutorials Css

Topic

Creating margins in html pages using CSS
How to set margins in a specfic point or percent?



Explanation


Property: Margin

All 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.

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>

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>

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>

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>

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.




A Note
CSS - Cascading Style Sheets can be used along with html tags as explained in this site. This simple CSS will help you to create much elegant and neat html web pages. This does not need any additional softwares or codings. All web browser are capable of handing CSS codes.

Note 2: If required you can using <span> instead of <div> tags. div tag will start and end on new lines. span will not exceed the tag area.
Other Links

web hosting