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;