CSS Logical Properties Cheat Sheet

Syntax

Logical properties replace physical properties like left/right/top/bottom with properties that are relative to the writing system the layout uses, e.g. right-to-left for Arabic, top-to-bottom in Japanese, etc.

Instead of thinking “layout,” think of the writing direction. So, taking English as an example:

The block dimension is top-to-bottom.
The inline dimension is left-to-right.

Both dimensions have a start and an end.

Here are a few examples (for English):

Logical properties	Physical properties
`block-size`	`height`
`inline-size`	`width`
`inset-block-start`	`top`
`inset-inline-end`	`right`
`margin-block-end`	`margin-bottom`
`padding-inline-start`	`padding-left`

A more accurate definition (on MDN) of inline and block is:

The block dimension is perpendicular to the flow of text within a line. For standard English text, it is the vertical dimension.
The inline dimension is parallel to the flow of text within a line. For standard English text, it is the horizontal dimension.

This new syntax also gives us some convenient new shorthands, for example:

Logical properties	Physical properties
`inset-block`	top + bottom
`inset-inline`	left + right
`margin-block`	margin top + bottom
`padding-inline`	padding left + right

The full list

Here’s the full list on MDN, and below is a table of the properties you’ll likely use most often.

Note: inset is a shorthand for physical properties even though it sounds like it should be part of the logical properties. (That’s probably why it’s mistakenly listed on the MDN page.)

Physical properties	Logical properties
`width`	`inline-size`
`height`	`block-size`
`max-width`	`max-inline-size`
`max-height`	`max-block-size`
`min-width`	`min-inline-size`
`min-height`	`min-block-size`
`top`	`inset-block-start`
`bottom`	`inset-block-end`
`left`	`inset-inline-start`
`right`	`inset-inline-end`
top + bottom (New)	`inset-block`
left + right (New)	`inset-inline`
Shorthand for physical properties!	~~`inset`~~
`margin-top`	`margin-block-start`
`margin-bottom`	`margin-block-end`
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
margin top + bottom (New)	`margin-block`
margin left + right (New)	`margin-inline`
`padding-top`	`padding-block-start`
`padding-bottom`	`padding-block-end`
`padding-left`	`padding-inline-start`
`padding-right`	`padding-inline-end`
padding top + bottom (New)	`padding-block`
padding left + right (New)	`padding-inline`
`border-top`	`border-block-start`
`border-bottom`	`border-block-end`
`border-left`	`border-inline-start`
`border-right`	`border-inline-end`
border top + bottom (New)	`border-block`
border left + right (New)	`border-inline`

Use case

In a nutshell, I agree with Chris Coyier, you should use logical properties almost all the time, with a few exceptions:

Where it doesn’t work

Media queries
Transform function
Background position

Where it doesn’t make sense

Image dimensions
Purely aesthetic design elements, outside the content context.

Resources

RTL Styling 101

This guide on how to style for RTL in CSS is a bit outdated (it doesn’t use logical properties) but it’s written by someone who speaks Arabic and it is full of useful nuggets!

Horizontal-in-Vertical Composition

The text-combine-upright property is useful in languages like Japanese, when you need to combine vertical text with things like roman numerals that need to stay horizontal.