Semua elemen itu kotak

Rahasia terbesar CSS yang jarang diberi tahu di awal: setiap elemen di halaman adalah kotak persegi panjang. Judul itu kotak. Paragraf itu kotak. Gambar itu kotak. Yang tampak “bundar” cuma kotak yang sudutnya dibulatkan.

Begitu kamu melihat halaman sebagai tumpukan kotak, mengatur jarak jadi masuk akal.

Empat lapis sebuah kotak

Dari dalam ke luar:

1. Isi (content): tulisan atau gambarnya.
2. PaddingPaddingJarak di dalam sebuah elemen, antara isinya dan tepinya.Penjelasan lengkap →: ruang kosong di dalam kotak, antara isi dan bingkai.
3. Border: bingkainya.
4. MarginMarginJarak di luar sebuah elemen, antara elemen itu dan tetangganya.Penjelasan lengkap →: ruang kosong di luar kotak, jarak ke kotak tetangga.

Cara mengingatnya: padding itu “bantalan” di dalam, margin itu “jarak” di luar.

Properti yang dipakai

.kartu {
  padding: 20px;                 /* ruang dalam, semua sisi */
  border: 2px solid #0a66c2;    /* tebal, gaya garis, warna */
  border-radius: 12px;           /* sudut membulat */
  margin: 16px;                  /* jarak luar */
  max-width: 300px;              /* lebar paling besar */
}

Beberapa catatan:

• padding dan margin bisa diisi satu angka (semua sisi) atau dua angka: 10px 20px = atas-bawah 10, kiri-kanan 20. Empat angka berarti atas, kanan, bawah, kiri (searah jarum jam).
• border ditulis tiga serangkai: tebal, gaya (solid garis penuh, dashed putus-putus), warna.
• width mengunci lebar. max-width lebih ramah: “boleh selebar ini paling banyak”, jadi di layar HP yang sempit kotaknya menyusut sendiri.
• margin: 0 auto menaruh kotak di tengah halaman (dengan width atau max-width).

Coba sendiri

Dua kartu menempel dan polos. Dandani lewat tiga tantangan, lalu lihat jarak antar kartu.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kotak</title>
  <style>
    body {
      background: #eeeeee;
      font-family: system-ui, Arial, sans-serif;
    }
    .kartu {
      background: white;
      /* Tantangan 1: padding 20px supaya tulisan tidak menempel ke tepi kartu */
      /* Tantangan 2: border 2px solid #0a66c2 dan border-radius 12px */
      /* Tantangan 3: margin 16px, lalu max-width 300px */
    }
  </style>
</head>
<body>
  <div class="kartu">
    <h2>Kartu nama</h2>
    <p>Aku sedang belajar CSS.</p>
  </div>
  <div class="kartu">
    <h2>Kartu kedua</h2>
    <p>Lihat jaraknya dengan kartu di atas.</p>
  </div>
</body>
</html>