Logical Properties and Writing Modes

What Is It?

Logical properties describe inline and block directions rather than fixed physical sides, helping layouts adapt to language direction and writing mode.

Properties, Tags and Attributes Explained

• margin-inline / padding-inline: Set spacing along the inline axis.
• margin-block / padding-block: Set spacing along the block axis.
• inline-size / block-size: Logical alternatives to width and height.
• border-inline-start: Styles the leading inline edge.
• writing-mode: Controls horizontal or vertical text flow.
• dir: An HTML attribute expressing text direction, such as rtl.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Direction-aware callout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Logical Properties and Writing Modes</title>
  <style>
    .note { padding-inline: 16px; padding-block: 12px; border-inline-start: 4px solid #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <p class="note">Left-to-right callout</p><p class="note" dir="rtl">Right-to-left callout</p>
</body>
</html>

What you see: The leading border follows the direction: left for the first box, right for the second.

Example 2: Vertical writing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Logical Properties and Writing Modes</title>
  <style>
    .demo { writing-mode: vertical-rl; inline-size: 150px; padding-block: 12px; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="demo">A vertical label</div>
</body>
</html>

What you see: The inline axis runs vertically, so inline-size controls its vertical extent.

Example 3: Separate blocks with logical margins

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Logical Properties and Writing Modes</title>
  <style>
    .box { margin-block: 20px 32px; margin-inline: 12px; padding-inline: 16px; padding-block: 12px; background: #e0e7ff; }
  </style>
</head>
<body>
  <p>Previous content</p><div class="box">Block start and end margins follow writing mode.</div><p>Following content</p>
</body>
</html>

What you see: In horizontal writing, margin-block sets top and bottom spacing. Use logical margins when the spacing relationship should follow the content axes.

When and Where to Use It

Use logical properties for components translated into different writing directions and for layout rules expressed as start/end relationships.

Common Mistake or Useful Tip

Use the HTML dir attribute for content direction instead of relying only on visual CSS direction changes.

Try It Yourself

Replace border-inline-start with border-inline-end.