CSS Logical Properties Guide: Building Layouts That Work Across All Languages

Why Logical Properties Matter

CSS logical properties represent a fundamental shift in how we think about layout on the web. Instead of tying our styles to physical directions like left, right, top, and bottom, logical properties allow us to describe layout in terms that relate to the flow of text itself. This approach makes our designs more adaptable to different writing modes and languages, reducing the need for conditional styling and making internationalization significantly simpler.

As the web becomes increasingly global, understanding and implementing logical properties has moved from a nice-to-have skill to an essential competency for modern CSS development.

The Problem with Physical Properties

Traditional CSS properties are tied to physical directions on the screen. Properties like margin-top, padding-left, and border-bottom describe spacing and borders in terms of screen-relative directions. This approach works perfectly fine for languages written left-to-right, top-to-bottom, like English, Spanish, or French. However, the web serves users worldwide who read and write in dozens of different directions and scripts.

Consider what happens when you apply margin-left to create spacing before a paragraph of text. In English, this visually places space on the left side, which is where new lines of text begin. But for a reader of Arabic or Hebrew, text flows from right to left, so the start of a new line appears on the right side of the container. Your margin-left would create space on the wrong side, breaking the intended visual rhythm of the content.

Similarly, when designing for vertical writing modes common in Japanese, Chinese, and Korean typography, physical properties become completely disconnected from how readers actually consume the content.

Understanding Block and Inline Dimensions

The CSS logical properties module introduces two fundamental concepts that replace physical directions: block dimension and inline dimension. Understanding these concepts is essential for working effectively with logical properties.

Block Dimension

The block dimension refers to the direction perpendicular to the flow of text within a line. In standard horizontal writing modes like English, Spanish, or German, text flows from left to right across the page, so the block dimension runs vertically from top to bottom. This means that block properties affect the vertical stacking of elements--the way paragraphs, headings, and other block-level content stack on top of each other.

Inline Dimension

The inline dimension, by contrast, runs parallel to the flow of text within a line. In horizontal writing modes, this means the inline dimension runs horizontally from left to right. The inline start is where text begins on each new line, and the inline end is where text concludes.

These dimensions are not fixed--they change based on the writing mode of the document or container.

Writing Modes and Their Impact

The writing-mode property is the key to understanding how logical properties behave in different contexts. This property establishes the primary direction of text flow for a given element and its descendants.

horizontal-tb (Default)

The value horizontal-tb is the default for most documents and creates horizontal text flow with lines stacking from top to bottom. In this mode, the inline dimension runs horizontally, and the block dimension runs vertically.

vertical-rl

The value vertical-rl creates vertical text flow with lines progressing from right to left. This is commonly used in traditional Japanese, Chinese, and Korean typography. In this mode, the inline dimension runs vertically from top to bottom, and the block dimension runs horizontally from right to left.

vertical-lr

The value vertical-lr also creates vertical text flow but with lines progressing from left to right. This writing mode is less common but still used in some contexts, particularly for certain Mongolian scripts.

Sizing Properties: From Width and Height to Logical Equivalents

The logical properties module provides flow-relative replacements for all the standard sizing properties. These mappings ensure that your sizing declarations always relate to the text flow rather than to physical screen directions.

Example Usage

.card {
 inline-size: 300px;
 block-size: auto;
 min-inline-size: 200px;
 max-inline-size: 100%;
}

This card component will size itself based on the inline dimension of its writing mode, whether that dimension runs horizontally or vertically.

Margin, Border, and Padding Logical Properties

The logical properties module provides comprehensive coverage for all margin, border, and padding properties.

Margin Mapping

Padding Mapping

Border Radius Mapping

Example

.alert {
 padding-block-start: 1rem;
 padding-inline-end: 1.5rem;
 padding-block-end: 1rem;
 padding-inline-start: 1.5rem;
 border-inline-start: 4px solid #2563eb;
}

Shorthand Properties and Value Patterns

The logical properties module introduces several powerful shorthand properties that have no physical equivalents.

Margin and Padding Shorthands

• margin-block - Sets both block-start and block-end margins
• margin-inline - Sets both inline-start and inline-end margins
• padding-block - Sets both block-start and block-end padding
• padding-inline - Sets both inline-start and inline-end padding

Border Shorthands

• border-block - Sets border width, style, and color for both block borders
• border-inline - Sets border width, style, and color for both inline borders
• border-block-width, border-block-style, border-block-color
• border-inline-width, border-inline-style, border-inline-color

Example

.component {
 margin-block: 1rem 2rem;
 padding-inline: 1.5rem;
 border-block: 2px solid #333;
}

These shorthands reduce code volume and ensure symmetrical spacing in the respective dimensions.

Practical Implementation Strategies

Transitioning from physical to logical properties requires a thoughtful approach. For teams building internationalized web applications, adopting logical properties early prevents technical debt.

Getting Started

1. Identify components that need to work across different writing modes
2. Start with new components rather than refactoring everything at once
3. Create a mapping table to help translate physical to logical properties
4. Test thoroughly in different writing modes

Incremental Migration

.component {
 /* Fallback for older browsers */
 margin-left: 1rem;
 margin-right: 1rem;

 /* Modern browsers will use these */
 margin-inline-start: 1rem;
 margin-inline-end: 1rem;
}

When to Use Each

Use logical properties when:

• Spacing should relate to content flow
• Components need to adapt to different writing modes
• Building reusable, internationalized components

Use physical properties when:

• You explicitly need fixed positioning relative to viewport
• Decorative elements should maintain physical placement
• Supporting legacy browsers without fallback strategy

Browser Support and Compatibility

Browser support for CSS logical properties has reached a mature state across modern browsers. All major browsers including Chrome, Firefox, Safari, and Edge support the core logical properties.

Supported Properties

• inline-size, block-size
• min-inline-size, min-block-size
• max-inline-size, max-block-size
• All margin and padding logical properties
• All border logical properties

Browser Versions

Fallback Strategy

For older browsers, provide physical properties as fallbacks that logical properties override:

.component {
 margin-left: 1rem;
 margin-right: 1rem;
 margin-inline-start: 1rem;
 margin-inline-end: 1rem;
}

When to Use Logical vs Physical Properties

The choice between logical and physical properties depends on your specific use case.

Logical Properties Are Better Default

In general, logical properties are the better default choice, with physical properties reserved for special circumstances. Use logical properties when you want spacing, sizing, or borders to relate to the content flow.

Use Logical Properties For:

• Card components that need spacing adapting to text direction
• Navigation headers with dynamic content
• Form inputs with consistent internal spacing
• Any component used across different languages

Use Physical Properties For:

• Fixed sidebars that should always appear on the left
• Decorative borders with intentional physical placement
• Specific visual effects that shouldn't adapt to writing mode

The inset Property

The inset property and its logical variants follow the same pattern:

• top, right, bottom, left → physical positioning
• inset-block-start, inset-inline-end → flow-relative positioning
• inset-block, inset-inline → shorthands

Building a Logical-First Design System

Adopting logical properties at a design system level ensures consistency across all components. When building scalable web applications, incorporating these principles from the start creates more maintainable, internationalized designs.

Key Strategies

1. Define tokens with logical names

:root {
--space-inline-start: 1rem;
--space-block-end: 1.5rem;
}

2. Create component patterns demonstrating logical property usage
3. Review new components for physical property usage
4. Consider linter rules that flag physical property usage
5. Train your team on logical property concepts and benefits

Design System Checklist

• Spacing tokens use logical naming (--space-inline-start, not --space-left)
• Component documentation shows logical property examples
• Code review process checks for intentional physical property usage
• Team understands why logical properties matter
• Migration plan exists for high-priority components

Conclusion

CSS logical properties represent a mature and well-supported feature of modern CSS that should be part of every front-end developer's toolkit. By relating layout to content flow rather than physical screen directions, logical properties make it possible to create designs that seamlessly adapt to different writing modes and languages.

Key Takeaways

1. Block and inline dimensions replace top/bottom and left/right thinking
2. Properties using block-start, block-end, inline-start, inline-end always relate correctly to content flow
3. Shorthands like margin-block and padding-inline reduce code volume
4. Browser support is excellent across modern browsers
5. Start using logical properties for new components today

The investment in learning and implementing logical properties pays dividends as your applications reach more users around the world with diverse reading patterns and language requirements.

Sources

1. MDN Web Docs: CSS Logical Properties and Values - Official documentation covering the module overview, concepts, and reference materials
2. MDN: Basic Concepts of Logical Properties - Core concepts and terminology
3. MDN: Logical Properties for Margins, Borders, and Padding - Detailed mappings for margin, border, and padding logical properties
4. MDN: Logical Properties for Sizing - Flow-relative dimension mappings
5. W3C CSS Logical Properties Module Level 1 - Official specification