CSS Padding-Inline Flexible Text Padding

Introduction

The padding-inline CSS property sets the padding at the start and end of an element’s inline direction. It’s useful for creating flexible designs that adapt to different text directions and writing modes. This property has been widely supported since September 2021.

Specification

The padding-inline property is part of the CSS Logical Properties and Values Level 1 specification. You can find more details in the official documentation:

• CSS Logical Properties and Values Level 1 - padding-inline

Description

The padding-inline property lets you set the padding at the start and end of an element’s inline direction. This is handy for making designs that adapt to the text’s writing mode, direction, and orientation. It’s a shorthand for padding-inline-start and padding-inline-end.

Syntax

You can use one or two values with padding-inline:

/* One value */
padding-inline: 10px;

/* Two values */
padding-inline: 10px 20px;

• One value: Applies the same padding to both the start and end.
• Two values: The first value is for the start, and the second is for the end.

Values

The padding-inline property accepts the following values:

• <length>: Fixed value (e.g., 10px, 1em).
• <percentage>: Relative to the inline size of the containing block (e.g., 5%).
• Global values: inherit, initial, revert, revert-layer, unset.

Constituent Properties

The padding-inline property combines two properties:

• padding-inline-start: Padding at the start of the inline direction.
• padding-inline-end: Padding at the end of the inline direction.

Using padding-inline, you can set both properties at once:

padding-inline: 10px 20px;

Examples

Horizontal Text

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

Vertical Text

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

Using Percentage Values

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  padding-inline: 5% 10%;
  background-color: #c8c800;
}

Using a Single Value

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  padding-inline: 20px;
  background-color: #c8c800;
}

Browser Compatibility

The padding-inline property is supported in most modern browsers:

• Google Chrome: Version 87 and later
• Microsoft Edge: Version 87 and later
• Mozilla Firefox: Version 66 and later
• Opera: Version 73 and later
• Safari: Version 14.1 and later

For the most up-to-date information, check the MDN documentation:

• MDN Browser Compatibility for padding-inline

See Also

For more information, you might find these topics useful:

• CSS Logical Properties and Values: Learn more about logical properties.
  • CSS Logical Properties and Values
• Mapped Physical Properties: Understand the physical padding properties.
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
• Writing Mode, Direction, and Text Orientation: Learn about properties that define text direction.
  • writing-mode
  • direction
  • text-orientation