HTML DOM Style paddingLeft Property
The Style paddingLeft property in HTML DOM is used to set or return the left padding of the element.
Syntax:
- It returns the paddingLeft property.
object.style.paddingLeft
- It sets the paddingLeft Property.
object.style.paddingLeft = "% | length | initial | inherit"
Return value: It returns the string value that represents the left padding of an element.
Example 1: This example changes the paddingLeft property of an element.
html
<!DOCTYPE html> < html > < head > < title >HTML DOM Style paddingLeft Property</ title > < style > body { text-align: center; } #textContent { border: 1px solid black; width: 300px; margin: auto; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML DOM Style paddingLeft Property</ h2 > < p id = "textContent" > A computer science portal for Beginner </ p > < br > < button onClick = "myBeginner()" > Change Left Padding </ button > < script > function myBeginner() { // Set padding left using // length unit. document.getElementById("textContent") .style.paddingLeft = "50px"; } </ script > </ body > </ html > |
Output:
Example 2: This example changes the paddingLeft property of an element.
html
<!DOCTYPE html> < html > < head > < title >HTML DOM Style paddingLeft Property</ title > < style > body { text-align: center; } #textContent { border: 1px solid black; width: 300px; margin: auto; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML DOM Style paddingLeft Property</ h2 > < p id = "textContent" > A computer science portal for Beginner </ p > < br > < button onClick = "myBeginner()" > Change Left Padding </ button > < script > function myBeginner() { // Set padding left using // length unit. document.getElementById("textContent") .style.paddingLeft = "10%"; } </ script > </ body > </ html > |
Output:
Supported Browsers:
- Chrome 1
- Edge 12
- Firefox 1
- Safari 1
- Opera 3.5