Javascript DOM CSS Style padding Property

Introduction

Set the padding of a <div> element: 

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {/* w w  w . ja  v a  2s.com*/
  border: 1px solid #FF0000;
}
</style>
</head>
<body>

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

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

</body>
</html>

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

Both the margin property and the padding property insert space around an element.

The margin inserts the space around the border.

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

Value Count ExampleDescription
One value div {padding: 50px} all four sides will have a padding of 50px
Two values div {padding: 50px 10px} the top and bottom padding will be 50px, left and right padding will be 10px
Three valuesdiv {padding: 50px 10px 20px} the top padding will be 50px, left and right padding will be 10px, bottom padding will be 20px
Four valuesdiv {padding: 50px 10px 20px 30px}the top padding will be 50px, right padding will be 10px, bottom padding will be 20px, left padding will be 30px

Property Values

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

P:The padding property Default Value: 0

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




PreviousNext

Related