Understanding CSS padding-inline-start for Responsive Design

Introduction

The padding-inline-start CSS property adds padding to the start of an element’s inline axis, adapting to different writing modes and text orientations. This makes your designs more flexible and responsive.

Description

The padding-inline-start property defines the padding at the logical start of an element’s inline axis. Unlike traditional padding properties, it adapts to different writing modes, directions, and text orientations.

In a left-to-right language like English, padding-inline-start is equivalent to padding-left. In a right-to-left language like Arabic, it’s equivalent to padding-right. This property works with other logical padding properties to provide comprehensive control over an element’s padding.

Syntax

The padding-inline-start property is easy to use. Here’s the basic syntax:

padding-inline-start: value;

The value can be:

• Length values: Absolute (px) or relative (em).
• Percentage value: Relative to the width of the containing block.
• Global values: Inheritance and reset values (inherit, initial, revert, revert-layer, unset).

Values

The padding-inline-start property can take several types of values:

Length Values

• Absolute Lengths:

  padding-inline-start: 10px; /* Absolute length */

• Relative Lengths:

  padding-inline-start: 1em; /* Relative length */

Percentage Value

padding-inline-start: 5%; /* Relative to the block container's width */

Global Values

• Inherit: Inherits the value from the parent element.

  padding-inline-start: inherit;

• Initial: Resets to the default value.

  padding-inline-start: initial;

• Revert: Reverts to the user agent stylesheet value.

  padding-inline-start: revert;

• Revert-layer: Reverts to the value defined in the previous layer.

  padding-inline-start: revert-layer;

• Unset: Resets to the inherited value if inheritable, otherwise to the initial value.

  padding-inline-start: unset;

Formal Definition

• Initial Value: 0
• Applies To: All elements except certain table-related elements.
• Inherited: No
• Percentages: Refers to the logical width of the containing block.
• Computed Value: As <length>
• Animation Type: A length

Formal Syntax

padding-inline-start = [<'padding-top'>]

<padding-top> = <length-percentage [0,∞]>

<length-percentage> = <length> | <percentage>

Examples

Basic Usage

HTML:

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

CSS:

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

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

Result: The text will have a 20px padding at the start of its inline axis.

Vertical Text

HTML:

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

CSS:

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

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

Result: The text will be displayed vertically with a 20px padding at the start of its inline axis.

Right-to-Left Language

HTML:

<div class="example">
  <p class="exampleText" lang="ar">مثال نص</p>
</div>

CSS:

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

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

Result: The Arabic text will have a 20px padding at the start of its inline axis.

Specifications

The padding-inline-start property is defined in the CSS Logical Properties and Values Level 1 specification. This specification outlines how logical properties work with writing modes, directionality, and text orientation.

Specification Document:

• [CSS Logical Properties and Values Level 1]WebsiteUrl

Browser Compatibility

The padding-inline-start property is widely supported across modern browsers:

• Google Chrome: Supported since version 87.
• Microsoft Edge: Supported since version 87.
• Mozilla Firefox: Supported since version 41.
• Opera: Supported since version 73.
• Safari: Supported since version 12.1.

See Also

To learn more and explore related properties and concepts, check out:

• CSS Logical Properties and Values: Discover how logical properties enhance web design flexibility.

  • [CSS Logical Properties and Values]WebsiteUrl

• Mapped Physical Properties: Understand how logical properties map to traditional physical properties:

  • [padding-top]WebsiteUrl
  • [padding-right]WebsiteUrl
  • [padding-bottom]WebsiteUrl
  • [padding-left]WebsiteUrl

• Related CSS Properties: Explore other CSS properties that define writing modes, directionality, and text orientation:

  • [writing-mode]WebsiteUrl
  • [direction]WebsiteUrl
  • [text-orientation]WebsiteUrl