Style marginLeftProperty
Style Object
Definition and Usage
The marginLeft property sets or returns the left margin of an element.
Syntax
Set the marginLeft property:
Object.style.marginLeft="%|length|auto|inherit"
Return the marginLeft property:
Object.style.marginLeft
| Value | Description |
|---|---|
| % | Defines the left margin as a percentage based on the width of the parent element. |
| length | Defines the width of the left margin using units such as px, cm, etc. |
| auto | The left margin set by the browser. |
| inherit | The left margin is inherited from the parent element. |
Browser Support
All major browsers support the marginLeft 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 around the outside of the border, while padding inserts space inside the element's border.
Example
Example
Change the left margin of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginLeft="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingLeft="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the left margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the left padding of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginLeft="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingLeft="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the left margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the left padding of the div element</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions