The paddingTop property of DOM is used to set the top padding of an element in HTML. Remember, inserts the space within the border of an element. It is also used to return the top padding. The default value is 0.
Syntax
Following is the syntax −
- Syntax to return the top padding
object.style.paddingTop
- Syntax to set the top padding
object.style.paddingTop = "%|length|initial|inherit"
Here, % is the top padding, length is the top padding in length (units), initial is used to set the property to the default value and inherit is used to inherit property form parent element.
Example
Let us now see an example to implement the paddingTop property −
<!DOCTYPE html>
<html>
<head>
<style>
#sample {
border: 2px dashed #ded575;
}
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
function demo() {
document.getElementById("sample").style.paddingTop = "80px";
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the Update button above, the following would be visible. We have set the top padding now easily using the padding-top property −
