CSS Academy · Pelajaran

Unit Relatif: em dan rem

Atur ukuran elemen relatif terhadap ukuran font induk atau akar menggunakan unit em dan rem.

Unit Relatif: em dan rem adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Apa Itu Unit Relatif?

Unit relatif berskala berdasarkan pengukuran lain — biasanya ukuran fon suatu elemen atau elemen akar. Unit ini memungkinkan desain yang dapat diskalakan dan responsif serta menghormati pengaturan pengguna.

em — Relatif terhadap Ukuran Fon Induk

em bersifat relatif terhadap font-size elemen saat ini (untuk properti font-size itu sendiri) atau elemen induk (untuk properti lainnya). Hal ini dapat menyebabkan pelipatan nilai.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em untuk Jarak

Ketika em digunakan untuk padding, margin, atau border-radius, nilainya relatif terhadap font-size milik elemen itu sendiri. Hal ini membuat komponen yang berskala secara proporsional.

<button class="button">Padded Button</button>

rem — Relatif terhadap Ukuran Fon Akar

rem (em akar) bersifat relatif terhadap font-size elemen akar (html). Unit ini tidak pernah mengalami pelipatan nilai dan dapat diprediksi di seluruh halaman.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem dan Aksesibilitas Pengguna

Jika pengguna meningkatkan ukuran fon dasar peramban (misalnya dari 16px menjadi 20px agar lebih mudah dibaca), unit rem akan ikut berskala. Unit px tetap tidak berubah. Karena itu, rem sangat disarankan untuk tipografi.

font-size html dalam Persentase

Tetapkan font-size akar sebagai persentase agar pengaturan peramban pengguna tetap dihormati:

<p>Root font-size respects the browser/user default (100%).</p>

Memilih em atau rem

Panduan praktis:

Gunakan rem untuk ukuran fon, token jarak, dan pengukuran tata letak
Gunakan em untuk jarak internal komponen yang harus berskala mengikuti ukuran fon komponen (misalnya padding pada tombol)

em dalam Kueri Media

Kueri media yang ditentukan dalam em merespons perubahan ukuran fon peramban. Titik henti 48em = 768px pada pengaturan bawaan, tetapi akan menyesuaikan jika pengguna mengubah ukuran fon dasarnya.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Menghitung em

Rumusnya: desired px / parent px = em value. Jika induknya 16px dan Anda menginginkan teks 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Masalah Pelipatan em

Menumpuk elemen berukuran em menyebabkan font-size terakumulasi secara perkalian. Karena itu, rem lebih disukai untuk font-size — unit ini selalu merujuk ke akar sehingga mencegah pelipatan nilai.

ch — Lebar Karakter

Unit ch sama dengan lebar karakter "0" dalam fon saat ini. Unit ini berguna untuk membatasi wadah teks agar panjang barisnya tetap mudah dibaca:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Pemeriksaan Singkat

Sebuah tombol memiliki font-size: 1.25rem dan padding: 0.5em. Jika font-size akar adalah 16px, berapa padding dalam piksel?

Rangkuman

em berskala relatif terhadap font-size elemen saat ini (atau induknya untuk font-size itu sendiri) — unit ini dapat mengalami pelipatan nilai. rem selalu berskala relatif terhadap akar dan tidak pernah mengalami pelipatan nilai. Gunakan rem untuk tipografi dan jarak global; gunakan em untuk jarak internal komponen yang proporsional.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Unit Relatif: em dan rem” gratis?

Ya — teks lengkap “Unit Relatif: em dan rem” 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 “Unit Relatif: em dan rem”?

Atur ukuran elemen relatif terhadap ukuran font induk atau akar menggunakan unit em dan rem. 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 2 dari 4.

Berapa lama pelajaran “Unit Relatif: em dan rem” 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

← Kembali ke CSS Academy