CSS Logical Properties

CSS Logical Properties

CSS logical properties describe dimensions, spacing, borders, and positions according to the flow of text instead of fixed physical directions such as top, right, bottom, and left.

Logical properties use block and inline directions. This allows the same CSS to adapt more naturally to different writing modes and text directions, including left-to-right, right-to-left, and vertical writing.

Physical and Logical Properties

Traditional physical properties refer to fixed directions such as top, right, bottom, and left.

.box {
  margin-left: 20px;
  padding-right: 30px;
}

Logical properties describe those relationships according to the flow of the document.

.box {
  margin-inline-start: 20px;
  padding-inline-end: 30px;
}

In a typical left-to-right horizontal writing mode, inline-start corresponds to the left side and inline-end corresponds to the right side. Those mappings can change when the writing direction or writing mode changes.

Block and Inline Directions

Logical properties are based on two axes: the block axis and the inline axis.

For English text in the default horizontal writing mode, the block direction normally runs from top to bottom and the inline direction runs from left to right.

Logical Sizing

Logical sizing properties provide alternatives to physical width and height.

.box {
  inline-size: 400px;
  block-size: 200px;
}

inline-size controls the dimension along the inline axis, while block-size controls the dimension along the block axis.

Minimum and maximum logical sizes are also available.

.content {
  min-inline-size: 300px;
  max-inline-size: 900px;
  min-block-size: 200px;
}

In the default horizontal writing mode, inline-size generally corresponds to width and block-size generally corresponds to height.

Logical Margins

Logical margin properties apply spacing according to the block or inline direction.

.box {
  margin-block-start: 20px;
  margin-block-end: 30px;
  margin-inline-start: 10px;
  margin-inline-end: 10px;
}

Shorthand properties can set both sides of an axis.

.box {
  margin-block: 20px 30px;
  margin-inline: 10px;
}

Using logical margins can reduce the need to rewrite directional spacing when supporting different text directions.

Logical Padding

Logical padding properties follow the same block and inline model as logical margins.

.box {
  padding-block-start: 20px;
  padding-block-end: 20px;
  padding-inline-start: 30px;
  padding-inline-end: 30px;
}

The shorthand forms can make symmetrical spacing more concise.

.box {
  padding-block: 20px;
  padding-inline: 30px;
}

This applies 20px along the block axis and 30px along the inline axis.

Logical Borders

Borders can also be assigned according to logical sides.

.notice {
  border-inline-start: 4px solid #0088cc;
}

With left-to-right horizontal text, this border appears on the left. With right-to-left horizontal text, the inline-start side changes and the border appears on the right.

Individual border components can also use logical properties.

.notice {
  border-block-end-width: 2px;
  border-block-end-style: solid;
  border-block-end-color: #0088cc;
}

Logical border radius properties are also available for corners defined by their block and inline positions.

.box {
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
}

Logical Positioning

Positioned elements can use logical inset properties instead of physical top, right, bottom, and left.

.badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
}

In a typical left-to-right horizontal writing mode, this places the badge near the top-right corner of its positioned containing block.

If the text direction changes to right-to-left, inset-inline-end maps to the opposite inline side.

The axis shorthand properties are inset-block and inset-inline.

Logical Shorthand Properties

Several logical properties provide shorthand forms that apply values to both sides of an axis.

When two values are supplied to an axis shorthand, the first applies to the start side and the second applies to the end side.

.box {
  margin-inline: 20px 40px;
}

Writing Modes

The writing-mode property determines whether lines of text are laid out horizontally or vertically and affects how logical block and inline directions map to physical sides.

.vertical {
  writing-mode: vertical-rl;
  padding-inline-start: 20px;
}

In a vertical writing mode, the inline axis runs vertically rather than horizontally. A logical property therefore follows the content flow instead of remaining tied to a physical side.

This is one of the main advantages of logical properties when creating layouts intended to work across different writing systems.

Text Direction

The direction property affects the inline direction for bidirectional text.

.example {
  direction: rtl;
  border-inline-start: 4px solid #0088cc;
  padding-inline-start: 20px;
}

With direction: rtl, the inline-start side is on the right for horizontal text, so both the border and padding adapt to that side.

Logical properties are especially useful when the same component must work with both left-to-right and right-to-left content.

Logical Property Practices

CSS Logical Properties Example

The following example places a border and padding at the inline-start side of a message.

.message {
  border-inline-start: 5px solid #0088cc;
  padding-inline-start: 20px;
}

Open the example in the editor and change direction: ltr to direction: rtl. The border and padding move from the left side to the right side because they are defined relative to the inline direction.