CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM
|
CSS - margin
Description:
The margin property is a shorthand property which sets the width of the margins on all four sides of an element.
Possible Values:
- length: Any length value.
- percentage: The margin's width is calculated with respect to the width of the element's containing block.
- auto: Sets the values for all four margins to be automatically calculated.
Applies to:
All the HTML elements
DOM Syntax:
object.style.margin="5px"
|
Example:
Here is the example:
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
</p>
<p style="margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
</p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
</p>
|
This will produce following result:
all four margins will be 10px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
|
To Become more comfortable - Do Online Practice
|
|
|