Use Logical Properties Instead of Physical Properties

Learn why and how to use logical properties like margin-block-start instead of physical properties like margin-top for better CSS architecture

Last updated:

Overview

We recommend using logical properties (e.g., margin-block-start) instead of physical properties (e.g., margin-top).

The commonly cited benefits of logical properties include simplified internationalization support (for right-to-left languages like Arabic and Hebrew) and vertical writing mode support. However, in practice, the opportunities to experience these benefits in actual work are limited (using logical properties doesn’t eliminate the need for layout adjustments in most cases).

Nevertheless, we recommend using logical properties for the following reasons.

Reasons & Benefits

1. More Concise and Efficient Syntax

Let’s take centering an element horizontally as an example. Traditionally, this was written as:

div {
  margin-right: auto;
  margin-left: auto;
}

Using logical properties, this can be written more concisely:

div {
  margin-inline: auto; /* Shorthand for margin-inline-start and margin-inline-end */
}

This approach improves code readability and maintainability in real-world projects.

In one project, a Sass mixin was defined as follows:

@mixin margin-auto {
  margin-right: auto;
  margin-left: auto;
}

.my-element {
  @include margin-auto;
  width: 50%;
}

While such custom mixins may seem convenient, they increase learning costs and create incompatibility between projects. Using logical properties, which are part of the standard specification, eliminates the need for such workarounds.

Web standards organizations recommend using logical properties, and adhering to standard specifications is important.

W3C Specification

The official W3C specification “CSS Logical Properties and Values Level 1” (currently W3C Candidate Recommendation) defines:

This module introduces logical properties and values that provide the author the ability to control layout through logical, rather than physical, directions.

This description clearly shows that using logical rather than physical directions enables more flexible and internationalization-friendly layouts.

Source: CSS Logical Properties and Values Level 1

MDN Documentation

MDN Web Docs (Mozilla’s official documentation) also states:

Logical properties are useful when working with different writing modes and directions — they adapt to the writing mode of the document, unlike physical properties.

Source: MDN - Logical properties and values

3. Consistency with Browser Default Styles

Modern browsers use logical properties in their default styles (user agent styles) for HTML elements.

For example, the user agent styles for the h1 element in Google Chrome version 137.0.7151.120 are:

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

Since browser default styles use logical properties, it’s appropriate from a consistency standpoint to use logical properties in custom styles as well.

Basic Usage

Margins and Padding

/* Physical properties (traditional approach) */
.element {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
  padding-top: 0.5rem;
  padding-left: 1rem;
}

/* Logical properties (recommended) */
.element {
  margin-block-start: 1rem;
  margin-inline-end: 2rem;
  margin-block-end: 1rem;
  margin-inline-start: 2rem;
  padding-block-start: 0.5rem;
  padding-inline-start: 1rem;
}

/* Shorthand properties are also available */
.element {
  margin-block: 1rem;
  margin-inline: 2rem;
  padding-block: 0.5rem 1rem;
  padding-inline: 1rem 0.5rem;
}

Borders

/* Physical properties */
.element {
  border-top: 2px solid #333;
  border-left: 1px solid #ccc;
}

/* Logical properties */
.element {
  border-block-start: 2px solid #333;
  border-inline-start: 1px solid #ccc;
}

Positioning

/* Physical properties */
.element {
  top: 10px;
  left: 20px;
}

/* Logical properties */
.element {
  inset-block-start: 10px;
  inset-inline-start: 20px;
}

Browser Support

Support Status

Logical properties are now widely supported by major modern browsers.

Detailed support information can be found at: CSS Logical Properties | Can I use

They are usable in virtually all browsers released in 2022 or later. Consider using physical properties only when you need to support older browsers.

References