← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 3 of 25

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:

  1. Logical vs. Physical Properties
  2. Understanding Block and Inline Axes
  3. Logical Padding and Margin Shorthands
  4. Logical Borders
  5. Logical Dimensions (block-size & inline-size)
Syntax
css 
selector {
  margin-inline: length;
  padding-block: length;
  border-inline-start: width style color;
}

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.
  • Accepted values:
  • margin-inline-start — replaces margin-left in LTR
  • margin-block-end — replaces margin-bottom
  • padding-inline — replaces left and right padding
  • inset-block-start — replaces top
  • width / height — become inline-size / block-size
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).
  • Accepted values:
  • inline axis — the direction text flows
  • block axis — the direction blocks stack
  • writing-mode: horizontal-tb — inline is horizontal, block is vertical
  • writing-mode: vertical-rl — inline is vertical, block goes right to left
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.
  • Accepted values:
  • margin-block: <length> — start and end on the block axis
  • margin-inline: <length> — start and end on the inline axis
  • padding-block | padding-inline — same for padding
  • margin-inline: auto — centers horizontally
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.
  • Accepted values:
  • border-inline: <width> <style> <color> — both inline sides
  • border-block-start: <...> — one side
  • border-start-start-radius: <length> — logical corner radius
  • border-inline-end-width: <length> — single logical side
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.
  • Accepted values:
  • inline-size: <length> — replaces width in horizontal writing modes
  • block-size: <length> — replaces height in horizontal writing modes
  • min-inline-size | max-inline-size — logical min/max width
  • min-block-size | max-block-size — logical min/max height
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>
Live Example
Related Topics

CSS Logical Sizing · CSS Custom Properties · CSS Subgrid · CSS Container Queries

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Mixing physical margins and logical padding on the same element, causing layout conflicts.
  2. Forgetting that block-size and inline-size are relative and can rotate if you change the webpage writing mode.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.