CSS

Lesson 08

Logical properties

Use flow-relative spacing and borders when styles should adapt to writing direction.

Good Code

article-callout.css
.article-callout {
  /* Logical properties express flow-relative spacing and edges. */
  margin-block: 1.5rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: 4px solid #2563eb;
}

.article-callout__meta {
  text-align: start;
}

Bad Code

article-callout.css
.article-callout {
  /* Physical left/right values make writing direction harder to support. */
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 16px 20px 16px 20px;
  border-left: 4px solid #2563eb;
}

.article-callout__meta {
  text-align: left;
}

Review Notes

What to review

Good Code

The good version says the accent belongs at the start edge and the spacing belongs to the block or inline axis, so the component can adapt to different writing directions.

Bad Code

The bad version hard-codes left and right even when the intent is start, end, inline, or block. That makes localization and layout reuse more expensive later.

Takeaways

  • Prefer inline and block logical properties when left/right/top/bottom are not the real intent.