Logical properties replace physical direction terms (left/right/top/bottom) with flow-relative terms (inline-start/inline-end/block-start/block-end). They automatically adapt to different writing modes and text directions (LTR, RTL, vertical).

/* PHYSICAL properties — assumes left-to-right, top-to-bottom */
.card-physical {
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-left: 4px solid blue;
  width: 300px;
  height: 200px;
}

/* LOGICAL equivalents — work in any writing mode */
.card-logical {
  margin-inline: 16px;        /* inline = left+right in LTR */
  padding-block: 12px;        /* block = top+bottom in horizontal writing */
  border-inline-start: 4px solid blue; /* left in LTR, right in RTL */
  inline-size: 300px;         /* width in horizontal, height in vertical */
  block-size: 200px;          /* height in horizontal, width in vertical */
}

/* The mapping in a standard LTR horizontal layout:

   Physical          Logical
   --------          -------
   width             inline-size
   height            block-size
   margin-top        margin-block-start
   margin-bottom     margin-block-end
   margin-left       margin-inline-start
   margin-right      margin-inline-end
   padding-left      padding-inline-start
   padding-right     padding-inline-end
   top               inset-block-start
   bottom            inset-block-end
   left              inset-inline-start
   right             inset-inline-end
   border-top        border-block-start
   text-align: left  text-align: start
*/

/* Shorthand examples */
.element {
  margin-inline: 16px;       /* margin-inline-start + margin-inline-end */
  padding-block: 8px 16px;   /* block-start = 8px, block-end = 16px */
  inset-inline: 0;            /* left: 0; right: 0 in LTR */
  border-inline: 1px solid;   /* left + right borders */
}

Practical internationalization example:

/* This layout works in LTR (English) and RTL (Arabic) without changes */
.sidebar-layout {
  display: flex;
}

.sidebar {
  inline-size: 250px;
  border-inline-end: 1px solid #e5e7eb;
  padding-inline-end: 16px;
  margin-inline-end: 16px;
  /* In RTL: sidebar moves to the right side automatically */
}

.main-content {
  flex: 1;
}

<!-- RTL support with a single attribute change -->
<html dir="rtl" lang="ar">
  <!-- All logical properties automatically flip -->
</html>

Included with Frontend Interview Guide

Ready for the complete Frontend Interview Guide?