CSS properties - padding-related

revision: Decemer 15, 2024

Content

padding property

An element's padding is the space between its content and its border.

The padding property is a shorthand property for: "padding-top", "padding-right", "padding-bottom", "padding-left".

Note: Padding creates extra space within an element, while margin creates extra space around an element.

This property can have from one to four values.

If the padding property has four values : {padding:10px 5px 15px 20px;} : top padding is 10px, right padding is 5px, bottom padding is 15px, left padding is 20px.
If the padding property has three values : {padding:10px 5px 15px;} : top padding is 10px, right and left padding are 5px, bottom padding is 15px.
If the padding property has two values : {padding:10px 5px;} : top and bottom padding are 10px, right and left padding are 5px.
If the padding property has one value: {padding:10px;} : all four paddings are 10px

Note: Negative values are not allowed.

CSS syntax : padding: length | initial | inherit;

Property values:

length : specifies the padding in px, pt, cm, etc. Default value is 0.

l% : specifies the padding in percent of the width of the containing element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.padding="10vw 2vw"

                    <div>
                        <p id="pad-A">This paragraph has a padding of 1.5vw on all four sides.</p>
                        <p id="pad-B">This paragraph has no specified padding, but a margin of 1.5vw 
                        on all four sides.</p>
                        <p id="pad-C">This paragraph has a 2vw padding for top, a 3vw padding for right 
                        and left, and a 1vw padding for bottom.</p>
            
                    </div>
                    <style>
                        #pad-A {border: 0.2vw solid green; padding: 1.5vw;}
                        #pad-B {border: 0.2vw solid green; margin: 1.5vw;}
                        #pad-C {border: 0.2vw solid green; padding: 2vw 3vw 1vw;}
                    </style>
                

padding-block property

- is the space from its border to its content in the block direction, and it is a shorthand property for the following properties: "padding-block-start", "padding-block-end"

Values for the padding-block property can be set in different ways.

If the padding-block property has two values : {padding-block: 10px 50px;} : padding at start is 10px, padding at end is 50px.
If the padding-block property has one value: {padding-block:10px;} : padding at start and end is 10px

The CSS padding-block and padding-inline properties are very similar to CSS properties "padding-top", "padding-bottom", "padding-left" and "padding-right", but the padding-block and padding-inline properties are dependent on block and inline directions.

CSS syntax : padding-block: auto | value | initial | inherit;

Property values:

auto : default. The element's default padding-block value.

length : specifies padding-block in px, pt, cm, etc. Negative values are not allowed.

l% : specifies padding-block in percent relative to size of parent element in the inline direction..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingBlock="10vw 2vw"

                <div>
                    <p class="pad-D" id="pad-D">This paragraph has a padding of 2vw on both sides in the block
                    direction.</p>
                    <p class="pad-D">This paragraph has no specified padding.</p>       
                    <div id="pad-E">
                        <p>This DIV has a padding of 1vw from the start in the block direction, and 5vwfrom the
                        end.</p>
                    </div>
                    
                </div>
                <style>
                .pad-D {border: 0.1vw solid black; background-color: rgb(218, 246, 255);}
                    #pad-D {padding-block: 2vw;}
                    #pad-E {background-color: lightblue;border: solid black 0.1vw; writing-mode: vertical-rl; 
                        padding-block: 1vw 5vw;}
                </style>
            

padding-block-end property

- is the space from its border to its content, at the end in the block direction.

CSS syntax : padding-block-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default padding-block-end value.

length : specifies the padding-block-end in px, pt, cm, etc. Negative values are not allowed.

l% : specifies padding-block-end in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingBlockEnd="2vw"

                <div>
                    <p class="pad-F" id="pad-F">This paragraph has a padding of 2vw at the end in the block direction.</p>
                    <p>This paragraph has no specified padding.</p>       
                </div>
                <style>
                    .pad-F{border: 0.1vw solid black; background-color: rgb(218, 246, 255);}
                    #pad-F {padding-block-end: 2vw;}
                </style>
            

padding-block-start property

- is the space from its border to its content, at the start in the block direction.

CSS syntax : padding-block-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default padding-block-start value.

length : specifies the padding-block-start in px, pt, cm, etc. Negative values are not allowed.

l% : specifies padding-block-start in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingBlockStart="2vw"

                <div>
                    <p class="pad-G" id="pad-G">This paragraph has a padding of 2vw at the start in the block direction.</p>
                    <p>This paragraph has no specified padding.</p>       
                </div>
                <style>
                    .pad-G{border: 0.1vw solid black; background-color: rgb(218, 246, 255);}
                    #pad-G {padding-block-start: 2vw;}
                </style>
            

padding-bottom property

- sets the bottom padding (space) of an element.

Note: Negative values are not allowed..

CSS syntax : padding-bottom: length | initial | inherit;

Property values:

length : specifies a fixed bottom padding in px, pt, cm, etc. Default value is 0.

l% : specifies a bottom padding in percent of the width of the containing element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingBottom="2vw"

                <div>
                    <p id="pad-H">A paragraph with a 2vw bottom padding.</p>
                </div>
                <style>
                #pad-H {border: 0.2vw solid red; padding-bottom: 2vw;}
                </style>
            

paddding-inline property

- is the space from its border to its content in the inline direction, and it is a shorthand property for the following properties: "padding-inline-start", "padding-inline-end".

Values for the padding-inline property can be set in different ways:

If the padding-inline property has two values : {padding-inline:10px 50px;} : padding at start is 10px, padding at end is 50px.
If the padding property has one value: {padding-inline:10px;} : padding at start and at end is 10px

The CSS padding-inline and padding-block properties are very similar to CSS properties "padding-top", "padding-bottom", "padding-left" and "padding-right", but the padding-inline and padding-block properties are dependent on inline and block directions.

Note: Negative values are not allowed.

CSS syntax : padding-inline: auto | value | length | initial | inherit;

Property values:

auto : default. The element's default padding-inline distance.

length : specifies distance in px, pt, cm, etc. Negative values are not allowed.

l% : specifies distance in percent relative to the size of the parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingInline="10vw 2vw"

                <div>
                    <div class="pad-I" id="pad-I">This div element has a padding of 50 pixels at the start and end in the 
                    inline direction.</div><br>
                    <div class="pad-I">This div element has no specified padding.</div>
                </div>
                <style>
                    .pad-I {border: 0.1vw solid lightgreen; box-sizing: border-box; width: 30vw;}
                    #pad-I {margin-bottom: 2vw; padding-inline: 5vw;}
                </style>
            

paddding-inline-end property

- is the space from its border to its content, at the end in the inline direction.

CSS syntax : padding-inline-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default padding-inline-end distance.

length : specifies distance in px, pt, cm, etc. Negative values are not allowed.

l% : specifies distance in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingInlineEnd="2vw"

                <div>
                    <div class="pad-J" id="pad-J">This div element has a padding of 5vw at the end in the inline direction.</div><br>
                    <div class="pad-J">This div element has no specified padding.</div>
                </div>
                <style>
                    .pad-J {border: 0.1vw solid lightgreen; box-sizing: border-box; width: 30vw;}
                    #pad-J {margin-bottom: 2vw; padding-inline: 5vw;}
                </style>
            

paddding-inline-start property

- is the space from its border to its content, at the start in the inline direction.

CSS syntax : padding-inline-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default padding-inline-start distance.

length : specifies distance in px, pt, cm, etc. Negative values are not allowed.

l% : specifies distance in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingInlineStart="2vw"

                <div>
                    <div class="pad-J" id="pad-J">This div element has a padding of 5vw at the end in the inline direction.</div><br>
                    <div class="pad-J">This div element has no specified padding.</div>
                </div>
                <style>
                    .pad-J {border: 0.1vw solid lightgreen; box-sizing: border-box; width: 30vw;}
                    #pad-J {margin-bottom: 2vw; padding-inline: 5vw;}
                </style>
            

paddding-left property

- sets the left padding (space) of an element.

Note: Negative values are not allowed.

CSS syntax : padding-left: length | initial | inherit;

Property values:

length : specifies a fixed left padding in px, pt, cm, etc. Default value is 0.

l% : specifies a left padding in percent of the width of the containing element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingLeft="2vw"

                <div>
                    <p class="pad-L">A paragraph with a 5vw left padding.</p>
                </div>
                <style>
                .pad-L {border: 0.2vw solid red; padding-left: 5vw;}
                </style>
            

paddding-right property

- sets the right padding (space) of an element.

Note: Negative values are not allowed.

CSS syntax : padding-right: length | initial | inherit;

Property values:

length : specifies a fixed right padding in px, pt, cm, etc. Default value is 0.

l% : specifies a right padding in percent of the width of the containing element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingRight="2vw"

                <div>
                    <p class="pad-M">A paragraph with a 15vw right padding.</p>
                </div>
                <style>
                .pad-M {border: 0.2vw solid red; padding-right: 15vw;}
                </style>
            

paddding-top property

- sets the top padding (space) of an element.

Note: Negative values are not allowed.

CSS syntax : padding-top: length | initial | inherit;

Property values:

length : specifies a fixed top padding in px, pt, cm, etc. Default value is 0.

l% : specifies a top padding in percent of the width of the containing element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.paddingTop="2vw"

                <div>
                    <p class="pad-N">A paragraph with a 2vw top padding.</p>
                </div>
                <style>
                .pad-N {border: 0.2vw solid red; padding-top: 2vw;}
                </style>