Margin, Padding, dan Border Logis
Ganti top/right/bottom/left dengan padanan properti logis start/end/block/inline.
Margin, Padding, dan Border Logis adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Padanan Logis untuk Spasi
Properti spasi fisik memiliki padanan logis yang menggunakan arah blok/sebaris:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
Properti Singkatan Logis
Properti singkatan baru mencakup kedua sisi blok atau kedua sisi sebaris:
<div class="card">Card with logical spacing</div>
Pemusatan dengan margin-inline: auto
Pola pemusatan klasik kini memiliki padanan logis:
<div class="container">Centered container</div>
Properti Border Logis
Tetapkan border pada sisi logis:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
Properti Posisi Logis
Properti pemosisian juga memiliki padanan logis:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
Singkatan inset
Properti inset sudah merupakan singkatan logis untuk keempat sisi. inset-block dan inset-inline menyediakan kontrol untuk dua sumbu.
<div class="wrap"><div class="overlay"></div></div>
Properti Ukuran Logis
Lebar dan tinggi memiliki padanan logis:
<div class="box">Sized box</div>
Perbandingan: Fisik vs Logis
Sebuah bilah sisi dengan border di sisi awal:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
Nilai Logis float dan clear
Properti float dan clear kini mendukung nilai logis:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
text-align Logis
text-align: start dan text-align: end adalah alternatif logis untuk kiri dan kanan yang secara otomatis beradaptasi dengan arah teks.
<div class="nav-link">Aligned to the start (left in LTR)</div>
Strategi Migrasi
Untuk kode baru, prioritaskan properti logis. Untuk kode yang sudah ada, refaktor satu komponen setiap kali. Urutan prioritas migrasi: spasi (margin/padding), border, ukuran, pemosisian.
Pemeriksaan Singkat
Properti logis manakah yang setara dengan margin-left dalam tata letak LTR dan seharusnya menjadi margin-right dalam RTL?
Rangkuman
Properti margin, padding, dan border logis menggunakan arah block dan inline, bukan atas/kanan/bawah/kiri secara fisik. Singkatan seperti margin-block, padding-inline, dan inset-block mencakup kedua sisi sekaligus. Prioritaskan properti logis untuk semua spasi dalam kode baru agar dukungan RTL dan mode penulisan vertikal tersedia secara otomatis.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Margin, Padding, dan Border Logis” gratis?
Ya — teks lengkap “Margin, Padding, dan Border Logis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Margin, Padding, dan Border Logis”?
Ganti top/right/bottom/left dengan padanan properti logis start/end/block/inline. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Margin, Padding, dan Border Logis” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengapa Properti Logis: Internasionalisasi
- Arah Block dan Inline
- Margin, Padding, dan Border Logis
- Properti Logis dalam Tata Letak RTL