Logical Properties

Logical properties are used as an accessible way to utilize the same styles for displaying content on all devices, regardless of directional preferences (eg: right-to-left, top-down, and left-to-right would all use the same styles). For the full specifications, check out https://www.w3.org/TR/css-logical-1/.

Introduction

Logical properties compute the final styles based on the user's preferences and orientation - the classic directions like 'left' and 'down' instead become relative directions, in the same way flex properties are applied on the direction of flow. 'left' is redefined as 'start of the inline flow', and so properties like 'margin-left' are rewritten as 'margin-inline-start'. Clients with default English preferences will effectively see margin-inline-start as margin-left, but clients with the flow direction top-to-down will instead see it as margin-top or margin-bottom, depending on their preferences. Similarly, clients with RTL languages (eg: Arabic) will see it as margin-right.

Using logical properties allows developers to bypass the step of parsing user preferences using a hook like useRTL, and instead concentrate on the relative layout of the page.

Logical properties are currently supported (as of April 2024) on 95% of browsers.

Examples

Regular Properties vs Logical Properties

LTR
RTL
Regular Properties
Content
Content
Logical Properties
Content
Content

Corresponding Properties

Regular Properties
width
height
margin-top
margin-left
padding-top
padding-left
Inner Content
padding-right
padding-bottom
margin-right
margin-bottom


Logical Properties
inline-size
block-size
margin-block-start
margin-inline-start
padding-block-start
padding-inline-start
Inner Content
padding-inline-end
padding-block-end
margin-inline-end
margin-block-end

Inline and Block Layouts

While LTR/RTL are simply the start and end of horizontal axis, logical properties also consider the primary direction of inline and block axes. The 'inline' axis is the direction of text flow (horizontal for most locales; vertical in some locales), while the block axis is perpendicular to this (up->down in most locales). Logical properties therefore end up renaming properties in the following way:

margin-{left,right,top,bottom}
padding-{left,right,top,bottom}
border-{left,right,top,bottom}-{style,width,color}
border-{top,bottom}-{left,right}-radius
float: {left,right}
{left,right}

becomes

margin-{inline,block}-{start,end}
padding-{inline,block}-{start,end}
border-{inline,block}-{start,end}-{style,width,color}
border-{start,end}-{start,end}-radius
float: inline-{start,end}
inset-inline-{start,end}

Cheatsheet

You can refer to the cheatsheet for a full list of the CSS properties we enforce as logical properties.