Javascript DOM CSS Style paddingTop Property

Introduction

Set the top padding of a <div> element: 

document.getElementById("myDiv").style.paddingTop = "50px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {//from w w  w.j  ava  2  s .  co m
  border: 1px solid #FF0000;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Set top padding</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.paddingTop = "50px";
}
</script>

</body>
</html>

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

The padding properties define the space between the element border and the element content.

The margin inserts the space around the border.

The padding inserts the space within the border of an element.

Property Values

Value Description
% Sets the top padding in % of the width of the parent element
length Sets the top padding in length units
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The paddingTop property Default Value: 0

The paddingTop property returns a String representing the top padding of an element.




PreviousNext

Related