You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozPaddingStart

MozPaddingStart style property | webkitPaddingStart style property

Browser support:
MozPaddingStart
webkitPaddingStart
Specifies or returns the space between an element's left or right border and its contents, depending on the writing direction.
If the writing direction is set to left-to-right, use the paddingLeft property, else use the paddingRight property for cross-browser compatibility.

Syntax:

object.MozPaddingStart;
object.webkitPaddingStart;
You can find the related objects in the Supported by objects section below.
MozPaddingStart: This property is read/write.
webkitPaddingStart: This property is read/write.
CSS page for this property: -moz-padding-start

Possible values:

The type of this property is string.
 One of the following values: 
inherit
Takes the value of this property from the computed style of the parent element.
space in non-negative length
The space in length units. For the supported length units, see the length page.
space in non-negative percentage
The space is the specified percentage of the width of the parent element.
Default: 0.

Example HTML code 1:

This example illustrates the use of the -moz-padding-start and the -webkit-padding-start properties:
<head>
    <style>
        .ltr {
            direction: ltr;
            border: 2px solid red;
            -moz-padding-start : 20px;
            -webkit-padding-start : 20px;
        }
        .rtl {
            direction: rtl;
            border: 2px solid red;
            -moz-padding-start : 20px;
            -webkit-padding-start : 20px;
        }
    </style>
</head>
<body>
    <a class="ltr">padding-start: 20px (ltr)</a>
    <br /><br />
    <a class="rtl">padding-start: 20px (rtl)</a>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozPaddingStart and webkitPaddingStart properties in JavaScript:
<head>
    <script type="text/javascript">
        function ChangePaddingStart () {
            var anchor = document.getElementById ("myAnchor");
            var input = document.getElementById ("myInput");

            if ('MozPaddingStart' in anchor.style) {
                anchor.style.MozPaddingStart = input.value + "px";
            } else if ('webkitPaddingStart' in anchor.style) {
                anchor.style.webkitPaddingStart = input.value + "px";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <a id="myAnchor" style="border: 2px solid red;">anchor with margin</a>
    <a style="border: 2px solid green;">next object</a>

    <input id="myInput" type="text" value="40" />
    <button onclick="ChangePaddingStart ();">Change MozPaddingStart!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content