CSS - padding-inline Property

Quiz

The CSS property padding-inline is a shorthand property, that determines the logical inline 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-inline-start and padding-inline-end.

Possible Values

The CSS property padding-inline can be specified with one or two values. When one value is specified, it is used for both padding-inline-start and padding-inline-end. When two values are specified, the first one is for padding-inline-start and second for padding-inline-end. The property takes the following values:

<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 inline. 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-inline = <'padding-top'>{1,2}

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

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

CSS padding-inline - Length Value

The following example demonstrates the use of padding-inline property with length values, which determines the inline 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 {
       margin: 10px;
      position: absolute;
      padding-inline: 15px 45px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - Percentage Value

The following example demonstrates the use of padding-inline property with percentage values, which determines the inline 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 {
       margin: 10px;
      position: absolute;
      padding-inline: 15% 55%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - Mixed Value

The following example demonstrates the use of padding-inline property with mixed values (length and percentage), which determines the start and end padding of the element. The first value determines the padding on left and the second value that from the right.

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

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

CSS padding-inline - Writing Mode Vertical

The following example demonstrates the use of padding-inline property with length values and writing mode as vertical-lr, which determines the inline start and end padding of the element. The first value determines the padding on top and the second value, at the bottom of the element.

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

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

CSS padding-inline - Single Value

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

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

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

   .padding-ex {
      margin: 1.5em;
      writing-mode: horizontal-tb;
      position: absolute;
      padding-inline: 30px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="padding-ex">padding-inline testing</span>
   </div>
</body>
</html>

CSS padding-inline - Related Properties

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

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-inline-start	Defines the logical inline start padding of an element.
padding-inline-end	Defines the logical inline 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.

Print Page