Style paddingLeftProperty
Style Object
Definition and Usage
The paddingLeft property sets or returns the left padding of an element.
Syntax
Set the paddingLeft property:
Object.style.paddingLeft="%|length|inherit"
Return the paddingLeft property:
Object.style.paddingLeft
| Value | Description |
|---|---|
| % | Defines the left padding in percent of the parent element's width. |
| length | Defines the width of the left padding using px, cm, and other units. |
| inherit | Inherits the left padding from the parent element. |
Browser Support
All major browsers support the paddingLeft 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
Both the margin and padding properties 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 padding of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie 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()">Modify the left margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the left padding of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie 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()">Modify the left margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the left padding of the div element</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions