Javascript Reference - HTML DOM Style paddingTop Property

The paddingTop property sets or gets the top padding of an element.

Browser Support


`paddingTop`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the paddingTop property:

var v = object.style.paddingTop

Set the paddingTop property:

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

Property Values

Value	Description
%	Set the top padding in percent of the width of the container element
length	Set the top 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 top padding of an element
CSS Version	CSS1

Example

The following code shows how to set the top padding.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--   ww w  . j  ava 2 s.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.paddingTop = "50px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the top padding.


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

The code above is rendered as follows:

Example 3

The following code shows how to set marginTop and paddingTop.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- ww  w  .j a  va 2s  .c o  m-->
    border: 1px solid #FF0000;
}
</style>
</head>
<body>

<div id="myDiv">This is some text.</div>
<button type="button" onclick="changeMargin()">top margin</button>
<div id="myDiv2">This is some text.</div>
<button type="button" onclick="changePadding()">top padding</button>
<script>
function changeMargin() {
    document.getElementById("myDiv").style.marginTop = "100px";
}
function changePadding() {
    document.getElementById("myDiv2").style.paddingTop = "100px";
}
</script>
</body>
</html>

The code above is rendered as follows: