margin-left, padding-top, border-right — property CSS klasik mengasumsikan tulisan mengalir dari kiri ke kanan, atas ke bawah. Tapi bahasa Arab/Ibrani mengalir kanan-kiri; Jepang tradisional bisa vertikal. Logical properties menulis CSS berbasis writing direction, bukan arah fisik.

/* Fisik — hardcoded ke LTR */
.kartu {
  margin-left: 1rem;
  padding-top: 0.5rem;
  border-right: 1px solid;
}

/* Logical — mengikuti writing direction */
.kartu {
  margin-inline-start: 1rem;
  padding-block-start: 0.5rem;
  border-inline-end: 1px solid;
}

Kosakata:

• inline — arah baris teks (kiri↔kanan di bahasa Indonesia).
• block — arah baris baru (atas↓bawah).
• start — awal (kiri di LTR, kanan di RTL).
• end — akhir (kebalikan start).

Sering dipakai:

Kenapa peduli walau website-mu cuma bahasa Indonesia?

• Kalau suatu saat mendukung Arab/Ibrani, layout akan otomatis mirror.
• inline-size / block-size lebih intent-ful dari width/height — jelas kamu peduli "ukuran sepanjang baris teks", bukan sekadar lebar piksel.
• Menulis pola seperti "margin start 1rem" lebih mudah dibaca saat dipakai dalam komponen yang fleksibel.

🎭 Analogi sehari-hari

Coba bayangin kamu nyetir di Inggris (setir kanan, jalan kiri) abis biasa di Indonesia (setir kiri, jalan kanan). GPS yang ngomong "belok ke timur" bingungin — beda arah tergantung kamu lagi di mana. Tapi GPS yang ngomong "belok ke arah perjalanan kamu" — selalu tepat. Logical properties kerja sama di CSS. margin-left itu "arah barat" — kaku ke fisik. margin-inline-start itu "arah awal baris" — adapt ke writing direction (LTR Arab, vertikal Jepang). Bahasa Arab? Layout otomatis mirror tanpa rewrite CSS.

⚠️ Jebakan yang sering ditemui

• Browser support modern (Chrome 89+, Firefox 66+, Safari 15+) — 2026 aman.
• Mix logical + physical = bingung, pilih satu konvensi.
• inline-size ≠ width — di vertical writing, inline-size jadi tinggi.
• Library lawas hardcode physical — bisa konflik dengan logical CSS kamu.
• Margin auto centering sama: margin-inline: auto.
• border-radius belum semua punya logical equivalent — masih border-end-start-radius baru di newer browsers.

TL;DR: Logical properties = CSS yang follow writing direction, bukan arah fisik. margin-inline-start (bukan margin-left), padding-block-start (bukan padding-top), inline-size (bukan width). Kosakata: inline = arah baris teks, block = arah baris baru, start/end = awal/akhir. Bonus: kalau suatu saat support Arab/Ibrani, layout auto-mirror tanpa rewrite. inline-size/block-size lebih intent-ful dari width/height. Browser support modern (2023+) udah aman.