Javascript Reference - HTML DOM Style paddingLeft Property

The paddingLeft property sets or get the left padding.

Browser Support


`paddingLeft`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the paddingLeft property:

var v = object.style.paddingLeft

Set the paddingLeft property:

object.style.paddingLeft='%|length|initial|inherit'

Property Values

Value	Description
%	Set the left padding in percent of the width of the container element
length	Set the left padding in length units
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the left padding
CSS Version	CSS1

Example

The following code shows how to set the left padding.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--  w w  w .  java2s.c o m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.paddingLeft = "50px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the left padding.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w w  w  .  jav a 2  s  .  c  o m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv" style="padding-left:5cm;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.paddingLeft);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to set marginLeft and paddingLeft.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--  w  w  w . j  a  v a 2 s.c om-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is some text.</div>
<button type="button" onclick="changeMargin()">left margin</button>
<div id="myDiv2">This is some text.</div>
<button type="button" onclick="changePadding()">left padding</button>
<script>
function changeMargin() {
    document.getElementById("myDiv").style.marginLeft = "100px";
}
function changePadding() {
    document.getElementById("myDiv2").style.paddingLeft = "100px";
}
</script>
</body>
</html>

The code above is rendered as follows: