HTML DOM margin Property
Complete Style Object Reference
Definition and Usage
The margin property sets the
margins of an element.
This property can take from one to four values:
- If you specify one value, like: div {margin: 50px} - all four
margins will be 50px
- If you specify two values, like: div {margin: 50px 10px} - the
top and bottom margins will be 50px, left and right margins will be 10px
- If you specify three values, like: div {margin: 50px 10px 20px}-
the top margin will be 50px, left and right margin will be 10px, bottom
margin will be 20px
- If you specify four values, like: div {margin: 50px 10px 20px 30px} - the top
margin will be 50px, right margin will be 10px, bottom
margin will be 20px, left margin will be 30px
Syntax
Object.style.margin=margin
|
Possible Values
Value |
Description |
margin |
Sets the margins. The value(s) can be defined
in % (defines a margin in % of the total height/width of the
document), length (defines a fixed margin), and auto (the browser
sets a margin) |
Example
The following example changes the margins of a paragraph:
<html>
<head>
<script type="text/javascript">
function changeMargin()
{
document.getElementById("p1").style.margin="100px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()"
value="Change margins of a paragraph" />
<p id="p1">This is a paragraph</p>
</body>
</html>
|
Try-It-Yourself Demos
margin - Change the margins of a paragraph
Complete Style Object Reference
|