CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



padding-block-start

Padding-Block-Start is a CSS property that is used to add padding to the starting edge of a block-level element. The starting edge is the edge that is closest to the beginning of the writing direction. For example, in English, the starting edge is the left edge for left-to-right writing direction and the right edge for right-to-left writing direction.

The padding-block-start property is a shorthand property that combines the padding-top, padding-right, padding-bottom, and padding-left properties. It is used to set the padding on all four sides of an element at once. The value of the padding-block-start property can be specified in different units such as pixels, ems, rems, percentages, etc.

Here is an example of how to use the padding-block-start property:

    
        .example {
            padding-block-start: 20px;
        }
    

This will add 20 pixels of padding to the starting edge of the element with the class "example".

The padding-block-start property can also be used with the padding-block-end property to set the padding on both the starting and ending edges of an element. Here is an example:

    
        .example {
            padding-block-start: 20px;
            padding-block-end: 10px;
        }
    

This will add 20 pixels of padding to the starting edge and 10 pixels of padding to the ending edge of the element with the class "example".

The padding-block-start property can be used with any block-level element such as div, p, h1, etc. Here is an example of how to use it with a paragraph element:

    
        <p style="padding-block-start: 30px;">
            This is a paragraph with padding on the starting edge.
        </p>
    

This will add 30 pixels of padding to the starting edge of the paragraph element.

It is important to note that the padding-block-start property is not supported in all browsers. It is supported in most modern browsers such as Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer.

Overall, the padding-block-start property is a useful CSS property that can be used to add padding to the starting edge of a block-level element. It is easy to use and can save time when styling web pages.

References:

Activity