Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM paddingLeft Property
The HTML DOM paddingLeft property is used to get or set the left padding of an HTML element. This property allows you to dynamically modify the spacing inside an element from the left side using JavaScript.
Syntax
Following is the syntax for getting the paddingLeft property −
object.style.paddingLeft
Following is the syntax for setting the paddingLeft property −
object.style.paddingLeft = "value"
Return Value
The paddingLeft property returns a string representing the left padding value of the element, including the unit (e.g., "20px", "2em", "5%").
Property Values
The paddingLeft property accepts the following values −
| Value | Description |
|---|---|
| length | Specifies left padding in length units like px, em, rem, cm, etc. (e.g., "10px", "1.5em") |
| percentage (%) | Defines left padding as a percentage of the parent element's width (e.g., "10%") |
| initial | Sets the left padding to its default value (0) |
| inherit | Inherits the left padding value from the parent element |
Example − Setting paddingLeft Property
Following example demonstrates how to dynamically add left padding to an element using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM paddingLeft Property</title>
<style>
.outer-box {
background-color: #db133a;
width: 300px;
height: 200px;
margin: 1rem auto;
border: 2px solid #000;
}
.inner-box {
background-color: #C3C3E6;
width: 150px;
height: 100px;
border: 1px solid #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>paddingLeft Property Example</h2>
<div class="outer-box">
<div class="inner-box"></div>
</div>
<button type="button" onclick="addPadding()">Add Left Padding</button>
<button type="button" onclick="removePadding()">Remove Padding</button>
<p id="output">Current left padding: 0px</p>
<script>
function addPadding() {
var outerBox = document.querySelector('.outer-box');
outerBox.style.paddingLeft = '50px';
document.getElementById('output').textContent = 'Current left padding: ' + outerBox.style.paddingLeft;
}
function removePadding() {
var outerBox = document.querySelector('.outer-box');
outerBox.style.paddingLeft = '0px';
document.getElementById('output').textContent = 'Current left padding: ' + outerBox.style.paddingLeft;
}
</script>
</body>
</html>
The output shows a red container with a blue inner box. Clicking "Add Left Padding" moves the inner box to the right by adding left padding −
paddingLeft Property Example [Red container with blue box inside] [Add Left Padding] [Remove Padding] Current left padding: 0px (updates when buttons are clicked)
Example − Getting paddingLeft Property
Following example shows how to retrieve the current left padding value of an element −
<!DOCTYPE html>
<html>
<head>
<title>Get paddingLeft Property</title>
<style>
.demo-box {
background-color: #f0f8ff;
width: 250px;
height: 100px;
margin: 20px auto;
padding-left: 25px;
border: 2px solid #4682b4;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Getting paddingLeft Value</h2>
<div class="demo-box" id="myBox">This box has CSS left padding</div>
<button onclick="showPadding()">Show Left Padding</button>
<p id="result"></p>
<script>
function showPadding() {
var box = document.getElementById('myBox');
var computedStyle = window.getComputedStyle(box);
var leftPadding = computedStyle.paddingLeft;
document.getElementById('result').textContent = 'Left padding: ' + leftPadding;
}
</script>
</body>
</html>
This example demonstrates getting the left padding value from an element that has CSS padding applied −
Getting paddingLeft Value [Box with text "This box has CSS left padding"] [Show Left Padding] (Displays: Left padding: 25px)
Example − Using Different Units
Following example shows how to set paddingLeft using various units −
<!DOCTYPE html>
<html>
<head>
<title>paddingLeft with Different Units</title>
<style>
.unit-box {
background-color: #ffe4e1;
width: 200px;
height: 60px;
margin: 10px auto;
border: 1px solid #cd5c5c;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>paddingLeft with Different Units</h2>
<div class="unit-box" id="box1">Box 1</div>
<div class="unit-box" id="box2">Box 2</div>
<div class="unit-box" id="box3">Box 3</div>
<button onclick="setPadding()">Set Different Padding Units</button>
<script>
function setPadding() {
document.getElementById('box1').style.paddingLeft = '20px'; // pixels
document.getElementById('box2').style.paddingLeft = '2em'; // em units
document.getElementById('box3').style.paddingLeft = '10%'; // percentage
}
</script>
</body>
</html>
This example shows how different units affect the left padding differently −
paddingLeft with Different Units [Box 1] [Box 2] [Box 3] [Set Different Padding Units] (After clicking, text in each box shifts right by different amounts)
Browser Compatibility
The paddingLeft property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. It works consistently across different platforms and devices.
Conclusion
The HTML DOM paddingLeft property provides an effective way to dynamically control the left padding of elements using JavaScript. It accepts various units like pixels, em, rem, and percentages, making it flexible for responsive design and interactive web applications.
167 Views
