CSS - padding-block Property

The CSS property padding-block is a shorthand property, that determines the logical block start and end padding of an element. It maps to the physical padding properties that depend upon the writing mode, direction and text orientation of the element.

Its constituent CSS properties are padding-block-start and padding-block-end.

Possible Values

The CSS property padding-block can be specified with one or two values. When one value is specified, it is used for both padding-block-start and padding-block-end. When two values are specified, the first one is for padding-block-start and second for padding-block-end. The property takes the same values as the padding-left CSS property, which are as follows:

  • <length> − Determines the size of the padding as a fixed value. Negative value is not allowed.

  • <percentage> − Determines the size of the padding as a percentage, that is relative to the inline size of containing block. Negative value is not allowed.

The values specified for the property corresponds to the padding-top and padding-bottom or padding-left and padding-right properties based on the values of writing mode, direction and text orientation of the element.

Applies To

All HTML elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

Syntax

padding-block = <'padding-top'>{1,2}

/* <length> values */
padding-block: 10px 20px;
padding-block: 1em 2em; 
padding-block: 10px;

/* <percentage> values */
padding-block: 5% 2%;

CSS padding-block - Length Value

The following example demonstrates the use of padding-block property with length values, which determines the start and end padding of the element. The first value determines the padding on top and the second value that at the bottom.

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      position: absolute;
      padding-block: 15px 45px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block testing</span>
   </div>
</body>
</html>

CSS padding-block - Percentage Value

The following example demonstrates the use of padding-block property with percentage values, which determines the start and end padding of the element. The first value determines the padding on top and the second value that at the bottom.

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      position: absolute;
      padding-block: 15% 25%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block testing</span>
   </div>
</body>
</html>

CSS padding-block - Mixed Value

The following example demonstrates the use of padding-block property with mixed values (length and percentage), which determines the start and end padding of the element. The first value determines the padding on top and the second value that at the bottom.

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      position: absolute;
      padding-block: 20px 20%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block testing</span>
   </div>
</body>
</html>

CSS padding-block - Writing Mode Vertical

The following example demonstrates the use of padding-block property with length values and writing mode as vertical-lr, which determines the start and end padding of the element. The first value determines the padding on left side and the second value, on the right side.

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
   }

   .padding-ex {
      writing-mode: vertical-lr;
      padding-block: 50px 10px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block testing</span>
   </div>
</body>
</html>

CSS padding-block - Single Value

The following example demonstrates the use of padding-block property with a single length / percentage value, which determines the start and end padding of the element.

Change the value of "padding-block" to a percentage and see the difference.

<html>
<head>
<style>
   div {
      background-color: purple;
      width: 250px;
      height: 180px;
      position: relative;
   }

   .padding-ex {
      position: absolute;
      padding-block: 30px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block testing</span>
   </div>
</body>
</html>

CSS padding-block - Related Properties

The following table lists all the related properties of CSS padding-block:

Property Description
padding-bottom Sets the height of the padding area on the bottom of element.
padding-left Sets the width of the padding area to the left side of an element.
padding-right Sets the width of the padding area on the right side of an element.
padding-top Sets the height of the padding area on the top of element.
padding-block-start Defines the logical block start padding of an element.
padding-block-end Defines the logical block end padding of an element.
writing-mode Sets whether lines of text are displayed horizontally or vertically.
direction Sets the direction of text, either left-to-right or right-to-left.
text-orientation Sets the orientation of text characters in a line.
Advertisements