rick@tillitsdone.com

+66824564755

Scroll to discover

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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-grid-template-columns.png

CSS Grid-Template-Columns Create Flexible Grid Layouts Learn how to use CSS grid-template-columns to create flexible and responsive grid layouts. Define column sizes with fixed, fractional, and dynamic options. Optimize your web design with this powerful CSS property.

css_property_cover/css-property-grid-template-rows.png

CSS grid-template-rows A Comprehensive Guide The CSS grid-template-rows property defines the number and height of rows within a grid container. It offers various options like fixed lengths, percentages, fr units, and dynamic functions like minmax() and fit-content(). This guide explains how to use grid-template-rows effectively in your web design projects.

css_property_cover/css-property-padding-block-end.png

Understanding CSS padding-block-end for Better Web Design Learn about the CSS padding-block-end property, which controls the padding at the logical end of a block element. Use cases include responsive designs and varied text orientations. Options available are length, percentage, and global CSS values.

css_property_cover/css-property-background-size.png

CSS Background-Size Control Image Scaling Learn how to use the CSS background-size property to control the scaling of background images. Discover options like cover, contain, and custom dimensions. Enhance your web design with responsive background images.

css_property_cover/css-property-border-inline.png

CSS Border-Inline Enhance Web Design with Logical Borders Learn how to use CSS border-inline to simplify the styling of inline borders based on writing mode and direction. Explore width, style, and color options.

css_property_cover/css-property-max-height.png

CSS Max-Height Control Element Height for Better Design The CSS max-height property sets the maximum height of an element. It helps manage layouts and prevent overflow, with options like length, percentage, and keywords.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS padding-inline-end Mastering Logical Padding

Introduction

Specification

Syntax and Values

Description

Formal Definition

Examples

Example 1: Basic Usage with Horizontal Text

Example 2: Vertical Text with Padding

Browser Compatibility

See Also

Talk with CEO