What are CSS logical properties?

CSS logical properties are CSS properties that use abstract directions (block, inline, start, end) rather than physical directions (top, bottom, left, right). They adapt automatically to the writing mode, text direction (LTR or RTL), and script orientation of the document, making your stylesheets work correctly in any language.

Why should I use logical properties instead of physical ones?

Physical properties (margin-left, padding-top) are hardcoded to screen directions and break in RTL languages like Arabic, Hebrew, or Persian. Logical properties (margin-inline-start, padding-block-start) automatically flip when the text direction changes, making your UI correct in both LTR and RTL without extra CSS overrides.

What does margin-top become in logical properties?

margin-top maps to margin-block-start. The 'block' axis refers to the direction text flows in blocks (top-to-bottom in horizontal writing), and 'start' means the beginning of that axis. Similarly, margin-bottom becomes margin-block-end, margin-left becomes margin-inline-start, and margin-right becomes margin-inline-end.

Are CSS logical properties well supported in browsers?

Yes — CSS logical properties have excellent browser support as of 2024, with full support in Chrome, Firefox, Safari, and Edge. The only edge cases are very old browsers (IE11 and early mobile WebViews), which are generally outside the support target for modern web projects.

Does this tool handle shorthand properties like margin or padding?

The tool converts individual physical properties to their logical equivalents. For shorthand properties (e.g., margin: 10px 20px), you should expand them first and then convert each individual property, since CSS logical property shorthands work differently (e.g., margin-block and margin-inline).

What does width convert to in logical properties?

width converts to inline-size, because in horizontal writing mode, the inline axis runs left-to-right (the width direction). height becomes block-size. max-width becomes max-inline-size, min-width becomes min-inline-size, max-height becomes max-block-size, and min-height becomes min-block-size.

CSS Logical Properties

Convert Physical CSS to
Logical Properties

Paste your CSS and instantly convert margin-top, padding-left, width and more to their modern logical equivalents. Write RTL-ready, internationalized stylesheets in seconds.

🔄

Instant Conversion

Paste any CSS and get logical property equivalents immediately — no server, no signup.

🌍

RTL & LTR Ready

Covers margin, padding, border, inset, sizing, text-align, float, clear, and overflow.

📋

Reference Table

Built-in full mapping table so you can learn the conversions as you go.

CSS Converter

Paste your CSS below and click Convert.

Input CSSPhysical properties

Output CSSLogical properties

Frequently Asked Questions

Everything you need to know about CSS Logical Properties Converter.

Convert Physical CSS toLogical Properties