EthicsComputerCourses
Join training
  1. Tutorials
  2. CSS Tutorial
  3. Box Model & Layout

Logical Properties

CSS · Lesson 24 of 55 6 min read Updated

So far you have written properties such as margin-left and padding-top. These are physical properties: they always mean the left side or the top of the screen. But not every language reads left to right. Urdu, which millions of people in India read every day, runs right to left, and Japanese can run top to bottom. A design built with physical properties ends up the wrong way round in those languages.

Logical properties describe sides by the flow of the text instead of by the screen. In this lesson you will learn the two axes, the most useful logical properties, and how to switch a page to right-to-left with almost no extra CSS.

Two axes: inline and block

Logical properties use two directions:

  • The inline axis is the direction text runs along a line. In English and Hindi it is left to right; in Urdu it is right to left.
  • The block axis is the direction lines and paragraphs stack. In most languages it is top to bottom.

Each axis has a start and an end. In English, inline-start is the left and inline-end is the right. In Urdu they swap: inline-start is the right. block-start is the top in both.

The common logical properties

PhysicalLogicalIn English it means
margin-top / margin-bottommargin-block-start / margin-block-endtop / bottom
margin-left / margin-rightmargin-inline-start / margin-inline-endleft / right
padding-left and padding-rightpadding-inlineboth sides
padding-top and padding-bottompadding-blocktop and bottom
border-leftborder-inline-startleft border
left / topinset-inline-start / inset-block-startleft / top offset
width / heightinline-size / block-sizewidth / height
text-align: lefttext-align: startaligned left
border-top-left-radiusborder-start-start-radiustop-left corner

The two-sided shorthands are the ones you will use most. They save typing even in a left-to-right site:

CSS
.page {
  max-inline-size: 60rem;
  margin-inline: auto;          /* centre: left and right auto */
  padding-inline: 1rem;         /* left and right padding */
  padding-block: 2rem 3rem;     /* top 2rem, bottom 3rem */
}
.callout {
  border-inline-start: 4px solid oklch(55% 0.14 250);
  padding-inline-start: 1rem;
}

With two values, such as padding-block: 2rem 3rem, the first is the start and the second is the end.

Switching direction

The direction of a page or a section is set in HTML with the dir attribute: dir="rtl" for right to left, dir="ltr" for left to right. It belongs in the HTML, not the CSS, because direction is part of the content's meaning. Add the lang attribute too, so browsers and screen readers know the language.

Here is the same card twice, once in English and once in Urdu. The CSS uses only logical properties:

HTMLTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical properties</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    .notice {
      max-inline-size: 24rem;
      border-inline-start: 6px solid oklch(55% 0.15 150);
      padding-block: 0.75rem;
      padding-inline: 1rem 0.5rem;
      margin-block-end: 1rem;
      background: #eef6f1;
      text-align: start;
      border-start-end-radius: 12px;
      border-end-end-radius: 12px;
    }
    .notice strong { margin-inline-end: 0.5rem; }
  </style>
</head>
<body>
  <p class="notice" lang="en" dir="ltr"><strong>Notice:</strong> Welcome to Lucknow.</p>
  <p class="notice" lang="ur" dir="rtl"><strong>اطلاع:</strong> لکھنؤ میں خوش آمدید</p>
</body>
</html>

In the English card, the green bar is on the left and the rounded corners are on the right. In the Urdu card, everything flips: the bar moves to the right, the text starts from the right and the rounded corners move to the left. Not a single extra rule was needed. Try changing border-inline-start to border-left and run it again: now the Urdu card has its bar on the wrong side.

Vertical writing

The writing-mode property turns the block and inline axes. vertical-rl makes text run top to bottom, with lines stacking from right to left, as in traditional Japanese. It is also handy for small vertical labels in any language.

HTMLTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>writing-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    .ticket { display: flex; border: 2px solid #1d3557; border-radius: 10px; max-inline-size: 22rem; overflow: hidden; }
    .side {
      writing-mode: vertical-rl;
      background: #1d3557;
      color: white;
      padding-inline: 1rem;    /* along the text: now top and bottom */
      padding-block: 0.5rem;   /* across the lines: now left and right */
      text-align: center;
      font-weight: bold;
      letter-spacing: 0.1em;
    }
    .main { padding: 1rem; }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="side">ADMIT ONE</div>
    <div class="main">
      <h3>Kochi Film Festival</h3>
      <p>Screen 2, Row F, Seat 14</p>
    </div>
  </div>
</body>
</html>

In the vertical label, the text runs from top to bottom, so padding-inline now adds space above and below it, while padding-block adds space on the left and right, because lines now stack sideways. Logical properties follow the writing mode automatically.

When to use physical properties

Logical properties are a good default for margins, padding, borders, sizes and text alignment. Physical properties still make sense when something is tied to the screen rather than to the text, such as a drop shadow falling down and to the right, or a background image that must stay on the left whatever the language. Both kinds work together in the same style sheet.

All the logical properties in this lesson are supported in current versions of all major browsers.

Common mistakes

  • Setting direction in CSS. Use the dir attribute in HTML; the CSS direction property is not a substitute for marking up the content's direction.
  • Mixing left and inline-start for the same thing. If a rule uses margin-left and another uses margin-inline-start, they target the same side in English but fight in Urdu. Pick one system.
  • Expecting text-align: left to flip. It does not. Use start and end.
  • Confusing the two values of padding-block. The first is start (top), the second is end (bottom).

Key points

  • Physical properties refer to the screen; logical properties refer to the flow of text.
  • The inline axis follows a line of text; the block axis is the way lines stack.
  • margin-inline, padding-block, border-inline-start and inset-inline-start replace their physical versions.
  • inline-size and block-size are the logical versions of width and height.
  • Set direction with dir="rtl" in HTML, and logical properties flip automatically.
  • writing-mode: vertical-rl turns the axes for vertical text.

Exercise

Rewrite this rule using only logical properties: .quote { margin-top: 1rem; margin-bottom: 2rem; padding-left: 1.5rem; padding-right: 1rem; border-left: 4px solid teal; text-align: left; width: 30rem; }. Then test it with two quotes on a page, one in English and one with dir="rtl".

Show solution
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical quote</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    .quote {
      margin-block: 1rem 2rem;
      padding-inline: 1.5rem 1rem;
      border-inline-start: 4px solid teal;
      text-align: start;
      inline-size: 30rem;
      max-inline-size: 100%;
    }
  </style>
</head>
<body>
  <blockquote class="quote" lang="en">Practice daily and the results will follow.</blockquote>
  <blockquote class="quote" lang="ur" dir="rtl">روزانہ مشق کریں</blockquote>
</body>
</html>

margin-block: 1rem 2rem covers top and bottom in one line, and the border and padding move to the right side automatically in the right-to-left quote.

Quick Quiz

1. In an English page, what does margin-inline-start refer to?

2. What is the logical version of width in a horizontal writing mode?

3. Where should you set right-to-left direction for an Urdu section?

4. What does padding-block: 1rem 2rem; set in English?

Learn CSS with a mentor

Free lessons get you started. Our Full Stack Web Development training adds real projects and code reviews from working developers.

  • Project-based learning
  • Mentor code reviews
  • Free counselling call
Get course details +91 90532 10052