🎨 HTML / CSS Intermediate

What are CSS Logical Properties?

Answer

CSS Logical Properties are an alternative to physical directional properties (margin-left, padding-top) that use logical directions relative to the writing mode and text direction. In a left-to-right horizontal layout: inline-start = left, inline-end = right, block-start = top, block-end = bottom. Examples: margin-inline-start, padding-block-end, border-inline. They are critical for internationalization — a layout using logical properties automatically flips correctly for right-to-left languages (Arabic, Hebrew) without additional media queries. Modern CSS recommends logical properties for any layout that may need to support multiple writing modes.