Understanding CSS Logical Properties and Logical Values

Today we discuss a simple yet crucial concept in modern CSS: logical properties and logical values, which allow developers to write layout code that automatically adapts to different writing modes such as left‑to‑right and right‑to‑left.

Consider the following HTML snippet that demonstrates a section with a heading and a paragraph:

<section>
  <h2>第一章</h2>
  <div>本章介绍了逻辑属性和逻辑值，这是一个演示示例。</div>
</section>

To achieve the desired visual effect, the original CSS uses physical properties:

section { text-align: left; }
h2 { border-left: .3em solid #ccc; padding-left: .5em; }

When the same page needs to support Arabic (right‑to‑left), the CSS must be rewritten manually:

section { text-align: right; /* left → right */ }
h2 { border-right: .3em solid #ccc; /* border-left → border-right */ padding-right: .5em; /* padding-left → padding-right */ }

Maintaining separate code for each writing mode is costly. Logical properties and values solve this by allowing a single stylesheet that works for all modes. The complete logical‑property CSS looks like this:

<style>
section { text-align: start; /* logical value */ }

h2 { border-inline-start: .3em solid #ccc; /* logical property */
     padding-inline-start: .5em; }
</style>

<section dir="auto">
  <h2>第一章</h2>
  <div>本章介绍了逻辑属性和逻辑值，这是一个演示示例。</div>
</section>

The table below shows which existing CSS properties have gained logical values:

Existing Property

New Logical Values

text-align

start, end

float, clear

inline-start, inline-end

caption-side

inline-start, inline-end

resize

block, inline

There are six groups of logical properties, for example:

Logical size: block-size, inline-size (maps to width or height depending on writing mode).

Logical margins: margin-block-start, margin-inline-end, etc.

Logical padding: padding-block-start, padding-inline-end, etc.

Logical borders: border-block-start-*, border-inline-end-*, and their shorthands.

Logical border‑radius: border-start-start-radius, border-end-end-radius, …

Logical offsets: inset-block-start, inset-inline-end, etc.

To compute a logical property, browsers first map the logical value to a physical one according to the element’s writing-mode, direction, and text-orientation. Then the normal CSS cascade determines the final computed value.

In summary, the article covered what logical properties and values are, which CSS properties now support them, the new logical property groups, and the calculation process, providing a concise reference for developers who want to write direction‑agnostic layouts.