CSS padding-inline-end Mastering Logical Padding

Learn about the CSS padding-inline-end property, which defines logical inline end padding.

Use it to create flexible and responsive designs with options like length, percentage, auto, inherit, initial, and unset.

Introduction

The padding-inline-end property in CSS is a handy tool for web developers. It lets you set the padding at the logical end of an element’s inline direction. This property adjusts based on the element’s writing mode, directionality, and text orientation, making it very flexible for responsive design. Supported across browsers since September 2021, it’s a key component for modern web design.

Specification

The padding-inline-end property is defined in the CSS Logical Properties and Values Level 1 specification. It maps to physical padding properties like padding-right, padding-left, padding-top, or padding-bottom, depending on the writing-mode, direction, and text-orientation.

This logical property makes web design more adaptable, allowing you to create layouts that work with different writing modes and directions. Understanding the specification ensures your use of padding-inline-end is consistent and reliable across different browsers and devices.

Syntax and Values

The padding-inline-end property lets you set the padding at the logical end of an element’s inline direction. Here’s how you can use it:

Syntax:

padding-inline-end: <length> | <percentage> | auto | inherit | initial | unset;

Property Values:

<length>: Sets a fixed padding value (e.g., px, cm, pt).
```
padding-inline-end: 10px;
padding-inline-end: 1em;
```
<percentage>: Sets the padding as a percentage relative to the containing block’s width.
```
padding-inline-end: 5%;
```
auto: Lets the browser determine the padding automatically.
inherit: Inherits the padding value from the parent element.
initial: Sets the padding to its default value.
unset: Resets the padding to its inherited value if it inherits, or to its initial value if not.

Global Values:

padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;

Description

The padding-inline-end property in CSS sets the logical padding at the end of an element’s inline direction. It’s particularly useful for creating flexible and responsive designs that adapt to different writing modes and directions.

For example, in a left-to-right writing mode, padding-inline-end corresponds to padding-right. In a right-to-left mode, it corresponds to padding-left. This logical approach ensures consistent padding regardless of text direction or orientation.

The padding-inline-end property works with other logical properties like padding-block-start, padding-block-end, and padding-inline-start to define the padding on all sides of an element, providing a comprehensive way to manage spacing in your layouts.

Formal Definition

The padding-inline-end property in CSS controls the logical inline end padding of an element. Here are the key aspects of its formal definition:

Initial Value:

Applies To:

All elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group, and table-column.

Inherited:

Percentages:

Calculated relative to the logical width of the containing block.

Computed Value:

As <length>

Animation Type:

A length

Formal Syntax:

padding-inline-end = <padding-top>

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

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

Examples

Here are some examples to illustrate how the padding-inline-end property works:

Example 1: Basic Usage with Horizontal Text

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS padding-inline-end Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 110px;
      height: 80px;
    }
    .example {
      padding-inline-end: 40px;
      background-color: purple;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS padding-inline-end Property</b>
    <br><br>
    <div class="example">Science Portal</div>
  </center>
</body>
</html>

Example 2: Vertical Text with Padding

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS padding-inline-end Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 110px;
      height: 80px;
    }
    .example {
      padding-inline-end: 20px;
      writing-mode: vertical-lr;
      background-color: purple;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS padding-inline-end Property</b>
    <br><br>
    <div class="example">Science Portal</div>
  </center>
</body>
</html>

These examples show how the padding-inline-end property adapts to different writing modes, providing a flexible and responsive way to manage padding in your web designs.

Browser Compatibility

The padding-inline-end property is widely supported across modern browsers, making it a reliable choice for web developers. This property has been available since September 2021, ensuring compatibility with many devices and browser versions. Here is an overview of the browser compatibility for padding-inline-end:

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.

For the most accurate and up-to-date information on browser compatibility, you can refer to the [MDN Web Docs]WebsiteUrl.

[CSS Logical Properties and Values]WebsiteUrl: Learn more about the logical properties and values in CSS, which provide a flexible and responsive way to design web layouts.
Mapped Physical Properties:
- [padding-top]WebsiteUrl: Defines the padding at the top of an element.
- [padding-right]WebsiteUrl: Defines the padding at the right of an element.
- [padding-bottom]WebsiteUrl: Defines the padding at the bottom of an element.
- [padding-left]WebsiteUrl: Defines the padding at the left of an element.
Related Properties:
- [writing-mode]WebsiteUrl: Specifies whether lines of text are laid out horizontally or vertically.
- [direction]WebsiteUrl: Specifies the text direction and alignment of text within block-level elements.
- [text-orientation]WebsiteUrl: Controls the orientation of text within a line box.
Other Logical Padding Properties:
- [padding-block-start]WebsiteUrl: Defines the logical block start padding of an element.
- [padding-block-end]WebsiteUrl: Defines the logical block end padding of an element.
- [padding-inline-start]WebsiteUrl: Defines the logical inline start padding of an element.

These resources provide a comprehensive understanding of how the padding-inline-end property fits into the broader context of CSS layout and design. By exploring these related properties and concepts, you can gain a deeper insight into creating responsive and adaptable web designs that enhance user experience across different devices and platforms.