Kotak dan jarak · Kode bersama Martin

Temukan rahasia terbesar dalam CSS: semua yang ada di halaman adalah sebuah kotak. Dan belajarlah untuk memindahkannya.

Tunjukkan pada saya: semuanya adalah sebuah kotak

Inilah rahasia terbesar dalam desain web: setiap hal pada halaman adalah kotak persegi panjang. Judul, paragraf, gambar, menu – semuanya. Setelah kamu belajar melihatnya, semua CSS diklik pada tempatnya.

Setiap kotak mempunyai tiga jenis ruang di sekelilingnya:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – bantalan: ruang antara konten dan tepian (di dalam kotak)
border – bingkai kotak
margin – jarak antara kotak dan tetangganya (di luar kotak)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Tunjukkan pada saya: halaman seperti yang dibuat oleh para profesional

kamu pernah melihat ini di situs web nyata – kontennya tidak direntangkan ke seluruh layar lebar, melainkan tetap berada di kolom nyaman di tengah. Tiga baris CSS melakukan itu:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto adalah rumus ajaib: nol di atas dan bawah, “secara otomatis sama” di sisi – artinya terpusat. Hampir setiap website di dunia menggunakan aturan ini.

Dan mari kita jinakkan gambar juga, agar tidak pernah keluar dari halaman:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Giliran kamu 💪

Tugas ini sama untuk setiap proyek – ini adalah tugas universal untuk situs web mana pun:

Pusatkan konten kamu: aturan max-width + margin: 0 auto pada main.
Jinakkan gambar kamu dengan aturan img dari contoh.
Tingkatkan lencana kamu dari pelajaran terakhir: tambahkan margin sehingga memiliki ruang untuk bernafas.
Biarkan halaman bernafas: tambahkan body { line-height: 1.6; } – baris teks tersebar dengan baik.

Solusi lengkap (berfungsi untuk setiap proyek)

Tambahkan ini ke style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Dan pada lencana kamu (lencana kamu mungkin disebut .news, .favorite, .tip, atau .win), tambahkan baris ini:

  margin: 20px 0;

💡

Cobalah membuat kotak terlihat! Tambahkan aturan ini ke CSS kamu sejenak: * { border: 1px solid red; } – tanda bintang berarti “segalanya”. Tiba-tiba kamu akan melihat setiap kotak di halaman. Kemudian hapus lagi, tapi ingat tampilan itu: itulah cara browser melihat halaman kamu.

✅

Periksa diri kamu: Konten kamu berada di kolom tengah yang nyaman, foto memiliki sudut membulat dan tidak tumpah ke mana pun, teks mudah dibaca. Kecilkan jendela browser kamu – kontennya akan menyesuaikan. Situs web kamu tiba-tiba terlihat lebih baik.

Apa yang bisa diambil dari pelajaran ini

Semua yang ada di halaman berbentuk kotak dengan padding (di dalam), border (bingkai), dan margin (di luar).
max-width + margin: 0 auto = kolom konten di tengah, sama seperti situs web sebenarnya.
img { lebar maksimal: 100%; } – foto tidak pernah tumpah.