CSS Logical Properties Margin Inline Padding Block Physical Mapping I18n
Definisi
CSS Logical Properties menggunakan arah logis (inline/block)而非 fisik (left/right/top/bottom). margin-inline = kiri+kanan (dalam arah tulisan), padding-block = atas+bawah. Ini adaptif terhadap direction (RTL/LTR) dan writing-mode.
Kapan dipakai
Pakai saat mendukung i18n (terutama RTL seperti Arab) atau writing-mode vertikal. Untuk layout LTR sederhana, tetap bisa pakai fisik, tapi logis lebih future-proof dan konsisten.
Cara kerja
Logis vs fisik
css/* fisik */
margin-left: 1rem; margin-right: 1rem;
/* logis ekuivalen */
margin-inline: 1rem;
/* fisik */
padding-top: 2rem; padding-bottom: 2rem;
/* logis */
padding-block: 2rem;RTL adaptif
css.card { padding-inline: 1rem; } /* otomatis benar di RTL */Struktur alur
Loading diagram...
Catatan implementasi
inline= sumbu kemajuan teks (horisontal di LTR);block= arah baris bertumpuk.inset-inline/inset-blockmenggantikanleft/right/top/bottomuntuk positioning.- Kombinasikan dengan
:dir(rtl)bila butuh penyesuaian spesifik. - Dukungan browser modern sudah penuh; hindari untuk target sangat tua.
Kesalahan umum
- Campur logis+fisik sebagian: inkonsisten; pilih satu pendekatan.
- Anggap inline = horizontal selalu: di vertical writing-mode, inline jadi vertikal.
- Lupa RTL: hardcode left/right membuat layout rusak di Arab.
- Over-engineer: untuk proyek LTR kecil, fisik cukup.