CSS - padding-block-end Property

The CSS property padding-block-end determines the logical block end 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-end 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-end property relates to the padding-block-start, 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-end = <'padding-top'>

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

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

CSS padding-block-end - Single Length Value

The following example demonstrates the use of padding-block-end property with a single length value, which determines the end 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-end: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

CSS padding-block-end - Single Percentage Value

The following example demonstrates the use of padding-block-end property with a single percentage value, which determines the end 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-end: 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

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

The following example demonstrates the use of padding-block-end property with percentage value and writing mode as vertical-rl, which determines the end 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-end: 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>

CSS padding-block-end - Direction rtl

The following example demonstrates the use of padding-block-end property with length value and direction as rtl (right-to-left), which determines the end 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-end: 3.4em;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-block-end</span>
   </div>
</body>
</html>
Advertisements