HTML DOM Style listStyleType Property

HTML | DOM Style paddingTop Property

Last Updated : 14 Jul, 2022

The Style paddingTop property is used for setting or returning the top 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.paddingTop

To set the property:

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

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

Property Values :

% : It is used to define the top padding in % of the width of the parent element.
length : It is used to define the top 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 paddingTop property method :

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

html

<!DOCTYPE html>
<html>

<head>
    <title>Style paddingTop 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 paddingTop</h2>

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

    <button ondblclick="padding()">Apply Top Padding</button>

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

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

</body>

</html>

Output:

Before Clicking the button:

After clicking the button:

Supported Browsers: The browser supported by HTML | DOM Style paddingTop 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 Style listStyleType Property

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

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

HTML DOM Style columnRule Property

The Style columnRule property in HTML DOM sets or returns the width, style, and color of the rule between the columns. To get the columnRule Propertyobject.style.columnRule = valueTO set the columnRule propertyobject.style.columnRule = "column-rule-width column-rule-style column-rule-color | initial

HTML | DOM Style textIndent Property

The DOM Style textIndent Property is used for indentation of the first line in each block of text. It also takes negative values. If the value is negative then the first line will be indented to the left. Syntax: It is used to set the textIndent property:object.style.textIndent = "length|%|initial|i

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.paddingLeftIt sets the paddingLeft Property. object.style.paddingLeft = "% | length | initial | inherit"Return value: It returns the string v

HTML DOM | Style paddingRight Property

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.paddingRightTo set the property:object.style.paddingRight = "%|length|initi

HTML | DOM Style pageBreakBefore Property

The pageBreakBefore property in HTML DOM is used to set or return the page-break-before characteristics before the specified element in HTML document. This property works in print and print preview mode. The pageBreakBefore property has no effect on absolutely positioned elements in the HTML DOM. Th

HTML | DOM Summary Object

The DOM Summary Object is used to represent the HTML <summary> element . The Summary element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where â€œidâ€ is the ID assigned to the â€œsummaryâ€ tag. Example-1: <!DOCTYPE html> <html> <head> <title>DOM S

HTML | DOM Style userSelect Property

The DOM Style UserSelect Property is used to set or return whether the text can be selected by the user or not. Syntax: It is used to return the property: object.style.userSelectIt is used to set the property: object.style.userSelect = "auto|none|text|all" Properties : auto: It has the default value

HTML | DOM Title Object

The Title Object in HTML DOM is used to represent the HTML <title> element. The <title> element can be accessed by using getElementByTagName() method. Syntax: document.getElementByTagName(); Properties: The title object contains single property text which is used to set or return a text

翻译：