CSS Logical Properties

Imagine designing a website. If you only write English (left-to-right), you align all your margins and padding to the left or right. But if you translate your site into Arabic or Hebrew (which read right-to-left), your layouts will break, as the borders and spacing stay on the wrong side. CSS logical properties solve this issue. Instead of using rigid physical coordinates (like left, right, top, and bottom), they use relative directions like block-start, block-end, inline-start, and inline-end. This allows your margins, padding, and borders to flip automatically based on the language and text direction of your webpage.

In this page:

Logical vs. Physical Properties
Understanding Block and Inline Axes
Logical Padding and Margin Shorthands
Logical Borders
Logical Dimensions (block-size & inline-size)

Logical vs. Physical Properties

Physical properties (like margin-left) are tied directly to the physical screen boundaries. Logical properties (like margin-inline-start) are relative, adapting automatically based on the webpage's text direction and writing mode.

Note: Use logical properties instead of physical properties to build flexible layouts that support international languages natively.

Warning: Avoid mixing logical and physical properties in the same stylesheet to prevent layout bugs.

Example: Logical vs. Physical Properties

css

<style>
.physical {
  margin-left: 20px;
  background: lightblue;
  padding: 8px;
  margin-bottom: 8px;
}
.logical {
  margin-inline-start: 20px;
  background: lightgreen;
  padding: 8px;
}
</style>
<div class="physical">Always left, regardless of direction</div>
<div class="logical" dir="rtl">Adapts: becomes right in RTL</div>

Understanding Block and Inline Axes

Logical properties use two main axes: the block axis (vertical coordinates by default) and the inline axis (horizontal coordinates by default). Start and end values define where content begins and ends along these axes.

Note: Think of block as the direction paragraphs stack (vertical), and inline as the direction words run (horizontal).

Warning: The axes will rotate automatically if you change the webpage writing mode to vertical.

Example: Understanding Block and Inline Axes

css

<style>
.box {
  padding-block-start: 10px;
  padding-inline-start: 20px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">Block = vertical stacking axis, inline = horizontal reading axis</div>

Logical Padding and Margin Shorthands

You can declare logical padding and margins using shorthand properties: margin-inline (for left and right margins) and padding-block (for top and bottom padding), keeping your stylesheets clean and easy to read.

Note: Use padding-block to set vertical padding, and padding-inline to set horizontal padding on your buttons.

Warning: Ensure your browser versions support logical shorthands before deploying them on production sites.

Example: Logical Padding and Margin Shorthands

css

<style>
.box {
  margin-inline: 20px;
  padding-block: 10px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">margin-inline sets left+right, padding-block sets top+bottom</div>

Logical Borders

Logical border properties allow you to style borders dynamically based on your text direction. Properties like border-block-start (top border by default) and border-inline-start (left border by default) adapt automatically to keep your layouts readable.

Note: Use border-inline-start to style vertical accent lines on your alerts and quotes cleanly.

Warning: Writing standard physical borders inside logical layouts can result in asymmetrical designs.

Example: Logical Borders

css

<style>
.alert {
  border-inline-start: 4px solid red;
}
</style>
<div class="alert">Accent border adapts to reading direction</div>

Logical Dimensions (block-size & inline-size)

Logical dimensions replace physical width and height properties. The inline-size property controls the horizontal dimension (width by default), and the block-size property controls the vertical dimension (height by default).

Note: Use inline-size instead of width when designing responsive layouts that support vertical reading modes.

Warning: Mixing inline-size and standard width can make troubleshooting element sizes in your CSS sheets difficult.

Example: Logical Dimensions (block-size & inline-size)

css

<style>
.box {
  inline-size: 200px;
  block-size: 100px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">inline-size = width, block-size = height, by default</div>

Common Mistakes

Mixing physical margins and logical padding on the same element, causing layout conflicts.
Forgetting that block-size and inline-size are relative and can rotate if you change the webpage writing mode.
Using non-standard logical property keys that browsers fail to parse.

Chapter Summary

Logical properties are relative directions that adapt automatically based on the webpage's reading direction.
Block coordinates handle vertical stacking flow, while inline coordinates handle horizontal text flow.
Replace physical properties with logical properties (like margin-inline, padding-block, and inline-size) to build clean, international websites.

Browser Support

Standard CSS logical properties and axis directions are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Subgrid Next Lesson → CSS Logical Sizing