CSS Margin
The CSS margin properties define the space around elements.
Margin
The margin clears an area around an element (outside the border). The margin
does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can
be changed independently using separate properties. A shorthand margin property
can also be used, to change all margins at once.
Possible Values
| Value |
Description |
| auto |
The browser sets the margin.
The result of this is
dependant of the browser |
| length |
Defines a fixed margin (in pixels, pt, em, etc.) |
| % |
Defines a margin in % of the containing element |
 It is possible to use
negative values, to overlap content.
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:
Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px; |
Try it yourself »
|
Margin - Shorthand property
To shorten the code, it is possible to specify all the margin properties in
one property. This is called a shorthand property.
The shorthand property for all the margin properties is "margin":
The margin property can have from one to four values.
- margin:25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
- margin:25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
- margin:25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
- margin:25px;
- all four margins are 25px
 |
More Examples |
Set the top
margin of a text using a cm value
This example demonstrates how to set the top margin of a text using a cm value.
Set
the bottom margin of a text using a percent value
This example demonstrates how to set the bottom margin of a text using a percent
value.
All CSS Margin Properties
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Property |
Description |
Values |
CSS |
| margin |
A shorthand property for setting the margin properties in one declaration |
margin-top
margin-right
margin-bottom
margin-left |
1 |
| margin-bottom |
Sets the bottom margin of an element |
auto
length
% |
1 |
| margin-left |
Sets the left margin of an element |
auto
length
% |
1 |
| margin-right |
Sets the right margin of an element |
auto
length
% |
1 |
| margin-top |
Sets the top margin of an element |
auto
length
% |
1 |
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
New features in Version 2010!
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
| 
