CSS - padding-block-start Property

Quiz

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

Possible Values

The CSS property padding-block-start can be specified with one of the following value:

<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 maps to the padding-bottom, padding-left or padding-right properties based on the values of writing mode, direction and text orientation of the element.

The padding-block-start property relates to the padding-block-end, padding-inline-start, and padding-inline-end properties, which are responsible for defining the other paddings 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-start = <'padding-top'>

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

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

CSS padding-block-start - Single Length Value

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

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

   .padding-ex {
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - Single Percentage Value

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

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

   .padding-ex {
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 15%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - Writing Mode vertical-rl

The following example demonstrates the use of padding-block-start property with percentage value and writing mode as vertical-rl, which determines the start padding of the element.

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

   .padding-ex {
      writing-mode: vertical-rl;
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 20%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

CSS padding-block-start - Direction rtl

The following example demonstrates the use of padding-block-start property with length value and direction as rtl (right-to-left), which determines the start padding of the element.

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

   .padding-ex {
      direction: rtl;
      margin-top: 1em;
      margin-left: 1em;
      position: absolute;
      padding-block-start: 3.4em;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-start</span>
   </div>
</body>
</html>

Print Page