FluentStack

Padding dan Margin

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner35 menitBahasa Indonesia

Padding dan Margin

Pelajari perbedaan jarak dalam dan jarak luar pada elemen CSS.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan padding dan margin
  • Menggunakan padding agar isi elemen tidak menempel
  • Menggunakan margin untuk memberi jarak antar elemen
CSSPaddingMarginSpacing

Isi lesson

7 blok
  1. 1.
    Padding untuk ruang dalam, margin untuk ruang luarBelum selesaiWajib
  2. 2.
    Spacing pada card dan buttonBelum selesaiWajib
  3. 3.
    Shorthand yang cukup untuk awalBelum selesaiWajib
  4. 4.
    Jangan memakai margin untuk ruang dalam cardBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Padding untuk ruang dalam, margin untuk ruang luar

Wajib

Padding dan margin sama-sama berhubungan dengan jarak, tetapi tempatnya berbeda. Padding adalah jarak di dalam elemen. Margin adalah jarak di luar elemen. Jika teks di dalam card terlalu menempel ke tepi, biasanya kamu butuh padding. Jika card terlalu menempel dengan elemen lain, biasanya kamu butuh margin.

Bagian ini memengaruhi progres lesson.

Spacing pada card dan button

Wajib
css
.card {
  padding: 20px;
  margin-bottom: 16px;
}

.button {
  padding: 10px 14px;
  margin-top: 12px;
}

padding pada card membuat isi card lebih lega. margin-bottom memberi jarak setelah card. padding pada button membuat tombol lebih nyaman dibaca dan diklik.

Bagian ini memengaruhi progres lesson.

Shorthand yang cukup untuk awal

Wajib

Kamu akan sering melihat penulisan singkat. padding: 16px berarti semua sisi mendapat jarak 16px. padding: 8px 12px berarti jarak atas-bawah 8px dan kiri-kanan 12px. Untuk sekarang, cukup pahami dua bentuk ini dulu. Empat nilai shorthand bisa dipelajari nanti saat kebutuhan layout lebih kompleks.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan memakai margin untuk ruang dalam card

Jika teks di dalam card terlalu menempel ke tepi card, gunakan padding. Margin memberi jarak di luar elemen, jadi margin tidak memperbaiki ruang antara isi card dan tepi card.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau teks di dalam card terlalu menempel ke tepi card, property mana yang biasanya dipakai?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Mengatur padding dan margin pada card

Latihan membedakan jarak dalam dan jarak luar pada card dan button.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis6 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Padding mengatur jarak dalam.
  • Margin mengatur jarak luar.
  • Button biasanya butuh padding agar lebih nyaman.
  • Card biasanya butuh padding dan margin agar terlihat rapi.
  • Berikutnya, kamu akan memakai border, border-radius, dan max-width untuk membuat card lebih jelas.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Padding untuk ruang dalam, margin untuk ruang luar.

Memuat progresReview module