Javascript DOM CSS Style paddingLeft Property

Introduction

Set the left padding of a <div> element: 

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

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {/*from w  w w.  jav a2s. c  o  m*/
  border: 1px solid #FF0000;
}
</style>
</head>
<body>

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

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

</body>
</html>

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

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 left padding in % of the width of the parent element
length Sets the left padding in length units
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The paddingLeft property Default Value: 0

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




PreviousNext

Related