Logical Sizing Properties Demo - Online block‑size & inline‑size

CSS logical sizing properties — block-size and inline-size — are writing-mode-aware alternatives to the traditional physical properties width and height. Instead of referring to fixed screen directions (horizontal/vertical), they refer to the block axis (the direction blocks of text stack) and the inline axis (the direction text flows). This means they automatically adapt when the writing-mode changes — essential for multilingual websites supporting languages like Japanese, Chinese, Arabic, or Mongolian that use different writing directions.

In a standard horizontal writing mode (horizontal-tb), block-size behaves exactly like height — they both control the vertical dimension. However, switch to a vertical writing mode like vertical-rl, and block-size suddenly controls the horizontal dimension (width), while height stubbornly remains vertical. This is the key advantage: logical properties follow the meaning of your layout, not fixed screen coordinates. Use block-size when you want to size along the block-stacking direction regardless of writing mode.

inline-size controls the dimension along the inline (text flow) axis. In horizontal-tb mode, it equals width. In vertical-rl mode, it equals height. Think of it as "how wide is my text line?" — in horizontal writing, lines stretch horizontally (width); in vertical writing, lines stretch vertically (height). Using inline-size ensures your element's line-length stays consistent across writing modes without manual adjustments.

Yes! block-size and inline-size have excellent browser support — they work in all modern browsers including Chrome (69+), Firefox (41+), Safari (12.1+), and Edge (79+). Global support exceeds 96% of users. Other logical properties like margin-block, padding-inline, and border-block are also widely supported. For production use, consider adding physical-property fallbacks for very old browsers, though this is increasingly unnecessary.

Use logical properties whenever your layout's meaning is tied to text flow rather than screen coordinates. Key scenarios: (1) Multilingual websites that switch between horizontal and vertical writing modes; (2) Reusable components that need to work in any writing context; (3) Internationalization (i18n) projects targeting languages like Japanese, Chinese, Korean, Arabic, or Hebrew; (4) When using CSS Grid or Flexbox with logical alignment values. Even for English-only sites, adopting logical properties future-proofs your code and enforces better layout thinking.

The CSS Logical Properties specification is comprehensive. Beyond sizing, you'll find: Margin/Padding — margin-block-start, margin-inline-end, padding-block, padding-inline (shorthand for both sides on an axis); Borders — border-block-start, border-inline-end; Positioning — inset-block-start, inset-inline-end (replacing top, right, bottom, left); Overflow — overflow-block, overflow-inline; and Resize — resize: block, resize: inline. Together they form a complete system for direction-agnostic layout.

Logical properties respect both writing-mode and direction (LTR/RTL). For sizing properties like block-size and inline-size, the direction doesn't change the actual size — but logical margin/padding/inset properties do flip appropriately. For example, margin-inline-start will be on the left in LTR and on the right in RTL. This eliminates the need for separate RTL stylesheets or complex selector overrides, making bidirectional layouts dramatically simpler to implement and maintain.

Absolutely! block-size and inline-size are fully animatable with CSS transitions and animations, just like width and height. You can use transition: block-size 0.3s ease, inline-size 0.3s ease; to create smooth resizing effects. They also work with @keyframes animations. What's particularly powerful is animating writing-mode changes combined with logical properties — the browser recalculates dimensions as the writing mode shifts, though note that writing-mode itself is a discrete property (no smooth interpolation between modes).