HTML | DOM Time Object

HTML DOM | Style paddingRight Property

Last Updated : 14 Jul, 2022

The Style paddingRight property is used for setting or returning the right padding of an element. The padding property inserts the user desired space within the border of an element.

Syntax :

To get the property:

object.style.paddingRight

To set the property:

object.style.paddingRight = "%|length|initial|inherit"

Return Values: It returns a string value, which represents the right padding of an element

Property Values:

% : It is used to define the right padding in % of the width of the parent element.
length : It is used to define the right padding in length units.
initial : It is used to set this property to its default value.
inherit : It is used to inherit this property from its parent element.

Below program illustrates the Style paddingRight property method :

Example: Setting the right padding of a <div> element.

html

<!DOCTYPE html>
<html>

<head>
    <title>Style paddingRight in HTML</title>
    <style>
        #MyElement {
            border: 1px solid black;
            background-color: green;
            width: 300px;
            height: 300px;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Style paddingRight</h2>

    <p>For setting the right padding, 
      double click the "Apply Right Padding" button: </p>
    <br>

    <button onClick="padding()">Apply Right Padding</button>

    <div id="MyElement">
        Geeksforgeeks is a portal for geeks.
    </div>

    <script>
        function padding() {
            document.getElementById("MyElement")
            .style.paddingRight = "100px";
        }
    </script>

</body>

</html>

Output:

Before Clicking the button:

After clicking the button:

Supported Browsers: The browser supported by HTML DOM | Style paddingRight Property are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 4 and above
Firefox 1 and above
Opera 3.5 and above
Apple Safari 1 and above

HTML | DOM Time Object

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

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

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");

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

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

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

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

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

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

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

HTML | DOM Location replace() Method

The DOM Location replace() Method in HTML is used to replace the current document with the specified one. This method is different from the assign() method as this removes the current document from the document history, therefore it is not possible to go back to the previous document using the 'back