FluentStack

Box Model Dasar

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

Box Model Dasar

Pahami bagaimana elemen HTML dibaca sebagai kotak yang punya content, padding, border, dan margin.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami elemen HTML sebagai box di CSS
  • Membedakan content, padding, border, dan margin
  • Menerapkan box model pada card sederhana
CSSBox ModelSpacing

Isi lesson

7 blok
  1. 1.
    Banyak elemen bisa dibayangkan sebagai kotakBelum selesaiWajib
  2. 2.
    Empat bagian box modelBelum selesaiWajib
  3. 3.
    Card dengan padding, border, dan marginBelum selesaiWajib
  4. 4.
    Box model bukan hanya dekorasiBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Banyak elemen bisa dibayangkan sebagai kotak

Wajib

Di CSS, banyak elemen HTML bisa kamu bayangkan sebagai box. Box ini punya isi, ruang bagian dalam, garis tepi, dan jarak luar. Kamu tidak perlu menghafal semua detail layout dulu. Fokus pada empat bagian awal: content, padding, border, dan margin.

Bagian ini memengaruhi progres lesson.

Empat bagian box model

Wajib

Content adalah isi elemen, misalnya teks heading atau paragraf. Padding adalah jarak di dalam box, antara content dan border. Border adalah garis pembatas box. Margin adalah jarak luar yang memisahkan box dari elemen lain. Analogi card membantu: isi card adalah content, ruang napas di dalam card adalah padding, garis tepinya adalah border, dan jarak card dari elemen lain adalah margin.

Bagian ini memengaruhi progres lesson.

Card dengan padding, border, dan margin

Wajib
html
<div class="card">
  <h2>Belajar Box Model</h2>
  <p>Padding, border, dan margin membantu tampilan lebih rapi.</p>
</div>

<style>
  .card {
    padding: 16px;
    border: 1px solid #3f3f46;
    margin: 16px;
  }
</style>

padding memberi ruang di dalam card. border memberi garis tepi. margin memberi jarak dari elemen lain. Ketiganya membantu card tidak terasa terlalu menempel.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Box model bukan hanya dekorasi

Box model membantu kamu membuat tampilan yang lebih rapi, mudah dibaca, dan tidak terlalu menempel. Saat sebuah UI terasa sesak, sering kali masalahnya ada di padding, margin, atau ukuran box.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Bagian box model mana yang memberi jarak di dalam elemen, antara isi dan border?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat card dengan box model dasar

Latihan memakai padding, border, dan margin pada card sederhana.

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.

5 cek otomatis5 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Elemen HTML bisa dipahami sebagai box.
  • Content adalah isi.
  • Padding adalah jarak dalam.
  • Border adalah garis tepi.
  • Margin adalah jarak luar.
  • Berikutnya, kamu akan membedakan padding dan margin lebih jelas.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Banyak elemen bisa dibayangkan sebagai kotak.

Memuat progresReview module