Width dan Height

Kotak yang telah kita beri jarak dan garis tepi masih berukuran mengikuti kebiasaan browser: elemen blok memenuhi lebar induknya, sedangkan tingginya mengikuti isinya. Layout nyata menuntut kendali: kontainer yang tidak terlalu lebar di layar besar, dan gambar yang menyusut mengikuti layar ponsel. Properti width dan height menjawabnya, dan box-sizing mengubah cara browser menghitung ukuran kotak.

Lebar dan Tinggi Bawaan Elemen Blok #

Elemen blok seperti p atau div secara bawaan melebar hingga memenuhi lebar induknya tanpa satu baris CSS pun, sedangkan tingginya mengikuti konten. Gambar (img) berbeda karena menampilkan ukuran asli filenya (intrinsic size); atribut width dan height pada img mengatur ukurannya langsung di HTML, sedangkan properti CSS mengatur ukuran elemen apa pun dari stylesheet.

.kotak {
  width: 300px;
  height: 120px;
}

Setelah width ditetapkan, elemen blok tidak lagi memenuhi lebar induk; sisanya menjadi ruang kosong. height sebaiknya hemat dipakai: nilai tetap membuat konten meluber ketika isinya bertambah.

Unit Ukuran: px, %, rem, vw, vh #

Nilai width dan height menerima berbagai unit, dan pilihannya menentukan kelenturan layout:

Unit px paling mudah diprediksi tetapi paling kaku: kotak 300px tetap 300px di layar mana pun. Unit %, vw, dan vh membuat ukuran mengikuti konteks, fondasi dari layout responsif pada contoh akhir Chapter ini.

min-width dan max-width #

Dua properti pendamping memberi batas, bukan nilai tetap. max-width: 720px berarti elemen boleh melebar mengikuti induk tetapi tidak pernah melebihi 720px; min-width adalah batas bawahnya.

.kontainer {
  width: 100%;
  max-width: 720px;
}

Pada layar sempit, .kontainer mengikuti lebar layar karena width: 100%; pada layar lebar, pertumbuhannya berhenti di 720px. Pendekatan ini lebih lentur daripada width: 720px tunggal.

Pola Wajib: Gambar Responsif #

Tanpa pengaturan, gambar besar meluber melewati kontainer di layar sempit. Pola berikut adalah perlakuan standar untuk gambar konten:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% mengikat lebar gambar agar tidak melebihi kontainernya, dan height: auto meminta browser menghitung tinggi secara proporsional sehingga rasio aspek terjaga saat menyusut.

box-sizing: border-box #

Secara bawaan, width hanya mengatur lapis content: padding dan border ditambahkan di luarnya. Kotak dengan width: 300px; padding: 16px; border: 2px solid kenyataannya selebar 300 + 32 + 4 = 336px, dan angka ini sering membuat layout meleset. box-sizing: border-box mengubah aturan main: nilai width mencakup content, padding, sekaligus border, sehingga kotaknya benar-benar selebar 300px.

* {
  box-sizing: border-box;
}

Pola di atas dipakai mayoritas proyek web modern sebagai bagian dari reset awal. Dengan aturan ini, menambah padding tidak memperlebar kotak; ruangnya diambil dari dalam.

Contoh Lengkap: Kontainer dan Gambar Responsif #

Contoh berikut merangkai Chapter ini: kontainer dengan lebar terbatas di tengah halaman, berisi gambar yang menyusut mengikuti layar. Gambar foto-kursi.svg tersedia di bundle; simpan ketiga file dalam satu folder, lalu buka file HTML dan coba ubah lebar jendela:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Galeri Kursi</title>
  <link rel="stylesheet" href="gaya-galeri.css">
</head>
<body>
  <main class="kontainer">
    <h1>Galeri Kursi</h1>
    <p>Kursi kerja ergonomis untuk meja belajar dan ruang rapat.</p>
    <img src="foto-kursi.svg" alt="Ilustrasi kursi kerja berwarna biru" class="foto">
  </main>
</body>
</html>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #f1f5f9;
}

.kontainer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  background-color: #ffffff;
}

.foto {
  max-width: 100%;
  height: auto;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Panel putih selebar maksimum 720px, berada di tengah jendela
  - Ketika jendela lebih sempit dari 720px, panel mengikuti lebar jendela
  - Gambar kursi memenuhi lebar panel tetapi tidak pernah meluber keluar
  - Saat jendela diubah lebih sempit, gambar menyusut dan proporsinya tetap

Mari kita telaah aturan yang bekerja di baliknya:

1. * { box-sizing: border-box }: ukuran mencakup padding dan border; max-width: 720px adalah lebar akhirnya.
2. body { margin: 0 }: mereset jarak bawaan dari tepi jendela.
3. .kontainer dengan width: 100% dan max-width: 720px: panel lentur di layar kecil dan berhenti di 720px pada layar besar.
4. .kontainer dengan margin: 0 auto: nilai auto membagi ruang sisa sama rata sehingga panel selalu di tengah.
5. .kontainer dengan padding: 16px: teks dan gambar berjarak dari tepi panel, berkat border-box.
6. .foto dengan max-width: 100% dan height: auto: gambar mengikuti lebar panel dan menyusut proporsional.

Ukuran kotak telah terkendali; tinggal perilaku bawaan yang menentukan kotak berdiri sendiri atau berdampingan. Chapter berikutnya membahas properti display, kunci di balik keduanya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — width
• MDN Web Docs — max-width
• MDN Web Docs — box-sizing

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Galeri Kursi</title>
  <link rel="stylesheet" href="gaya-galeri.css">
</head>
<body>
  <main class="kontainer">
    <h1>Galeri Kursi</h1>
    <p>Kursi kerja ergonomis untuk meja belajar dan ruang rapat.</p>
    <img src="foto-kursi.svg" alt="Ilustrasi kursi kerja berwarna biru" class="foto">
  </main>
</body>
</html>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #f1f5f9;
}

.kontainer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  background-color: #ffffff;
}

.foto {
  max-width: 100%;
  height: auto;
}