HTML DOM Style paddingLeft Property Last Updated : 29 Jan, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.paddingLeftIt 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>GeeksforGeeks</h1> <h2>HTML DOM Style paddingLeft Property</h2> <p id="textContent"> A computer science portal for geeks </p> <br> <button onClick="myGeeks()"> Change Left Padding </button> <script> function myGeeks() { // 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>GeeksforGeeks</h1> <h2>HTML DOM Style paddingLeft Property</h2> <p id="textContent"> A computer science portal for geeks </p> <br> <button onClick="myGeeks()"> Change Left Padding </button> <script> function myGeeks() { // Set padding left using // length unit. document.getElementById("textContent") .style.paddingLeft = "10%"; } </script> </body> </html> Output: Supported Browsers: Chrome 1Edge 12Firefox 1Safari 1Opera 3.5 Comment More infoAdvertise with us Next Article HTML | DOM Time Object P PranchalKatiyar Follow Improve Article Tags : Web Technologies HTML HTML-DOM HTML-Property Similar Reads HTML | DOM Heading Object The DOM Heading Object is used to represent the HTML <Heading> elements. The Heading elements is accessed by getElementById().Properties: align: This element contains a align attribute which is used to sets or returns the alignment of the heading elements. Syntax: document.getElementById("ID") 1 min read HTML | DOM Ul Object The DOM Ul Object is used to represent the HTML <ul> element .the ul element is accessed by getElementById().Properties: compact: It is used to set or return whether the height of the unordered list would be render smaller than normal, or not. type: It is used to set or return the value of the 2 min read HTML | DOM Time Object The DOM Time Object is used to represent the HTML Time element . The Time element is accessed by getElementById().Properties: dateTime: It contains single attribute datetime which is used to set or return the date/time in a machine-readable form of the element. Syntax: document.getElementById("ID"); 2 min read HTML DOM insertAdjacentHTML() Method The DOM insertAdjacentHTML() method is used to insert a text as HTML file to a specified position. This method is used to change or add text as HTML. Syntax : node.insertAdjacentHTML(specify-position, text-to-enter) Return Value : This will return the page with the specified change. There are four l 2 min read HTML DOM | Style pageBreakAfter Property The Style pageBreakAfter property is used for setting or returning the page-break behavior after an element in printing or print preview. The Style pageBreakAfter property does not affect the absolutely positioned elements. Syntax : To get the property: object.style.pageBreakAfter To set the propert 2 min read HTML | DOM Style columnGap Property The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column ga 4 min read HTML | DOM Style textDecorationColor Property The Style textDecorationColor property in HTML DOM is used to set the color of the text-decoration like underlines, overlines, and line-throughs. It can also return the text-decoration color. Syntax: It returns the textDecorationColor property.object.style.textDecorationColorIt is used to set the te 2 min read HTML DOM insertAdjacentElement() Method The insertAdjacentElement() method inserts the specified element at the specified position. The legal values for this position are. afterbeginafterendbeforebeginbeforeend Syntax: node.insertAdjacentElement(position, element) Parameters: This method requires 2 parameters. position: A position relativ 2 min read HTML | DOM Style padding Property The Style padding property is used for setting or returning the padding of an element. The Style padding property can be used in 4 different ways : div {padding: 30px} -In this case, all the four sides have a padding of 30px.div {padding: 100px 50px} -In this case, the top and bottom padding will be 4 min read HTML | DOM Style fontVariant Property The style fontVariant Property in DOM HTML is used to set the font in capital letters. This property mainly converts lowercase to uppercase letters but the letters have a small font size compared to remaining text. Syntax: It returns the fontVariant property.object.style.fontVariantIt used to set th 2 min read Like