Style marginRightProperty
Style Object
Definition and Usage
The marginRight property sets or returns the right margin of an element.
Syntax
Set the marginRight property:
Object.style.marginRight="%|length|auto|inherit"
Return the marginRight property:
Object.style.marginRight
| Value | Description |
|---|---|
| % | Defines the right margin as a percentage of the width of the parent element. |
| length | Defines the width of the right margin using units such as px, cm, etc. |
| auto | The right margin set by the browser. |
| inherit | The right margin is inherited from the parent element. |
Browser Support
All major browsers support the marginRight property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
The margin and padding properties both insert space around an element. However, the difference is that margin inserts space outside the border, while padding inserts space inside the element's border.
Example
Example
Change the right margin of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginRight="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingRight="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the right margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the right padding of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginRight="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingRight="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the right margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the right padding of the div element</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions