CSS: Logical properties

We are used to the physical CSS properties such as margin-bottom, margin-top, margin-left, and margin-right. These properties might cause problems with right-to-left languages.

Logical properties introduce the abstraction of block and inline. For standard English, the block is a vertical dimension, and the inline is horizontal. Examples of margin logical properties are as follows with their equivalent properties in standard English.

margin-block-end for margin-bottom

margin-block-start for margin-top

margin-inline-end for margin-right

margin-inline-start for margin-left