Abd. Asis

Sejauh ini kamu sudah bisa mengatur ruang di dalam elemen dengan padding dan ruang di luar elemen dengan margin. Tapi ada satu pertanyaan yang belum dijawab: seberapa besar elemen itu sendiri? Saat kamu menambahkan padding di bab sebelumnya, elemen ikut membesar karena browser menghitung padding sebagai tambahan dari ukuran konten. Untuk benar-benar mengendalikan dimensi elemen, kamu perlu width dan height.

Properti width dan height adalah cara paling langsung untuk menentukan ukuran elemen. Bukan ukuran kontennya secara tersirat, tapi ukuran area yang ingin kamu atur secara eksplisit.

Properti width dan height

Secara default, width dan height mengatur ukuran area konten elemen — bagian terdalam, sebelum padding, border, dan margin ditambahkan.

/* portofolio.css */
.kartu-profil {
  width: 320px;
  height: 200px;
  background-color: #f0f4f8;
  padding: 16px;
  border: 1px solid #cbd5e1;
}

Dengan deklarasi di atas, area konten .kartu-profil berukuran 320×200 piksel. Tapi ukuran total elemen yang ditampilkan di layar akan lebih besar: lebar total = 320px + 16px kiri + 16px kanan + 1px + 1px = 354px. Ini konsekuensi dari box-sizing: content-box yang merupakan default browser — topik yang akan dibahas lebih mendalam di Bab 14.

Nilai yang bisa digunakan untuk width dan height meliputi:

Nilai panjang absolut: 200px, 15em, 8rem
Nilai persentase: 50%, 100%
Kata kunci auto — browser menghitung sendiri berdasarkan konteks
Kata kunci intrinsik: max-content, min-content, fit-content

Nilai auto

Nilai auto adalah nilai awal kedua properti ini. Jika kamu tidak menentukan width, browser menghitung lebar elemen secara otomatis.

Untuk elemen block seperti <div>, width: auto berarti elemen merentang memenuhi lebar container-nya. Untuk elemen inline, width: auto berarti lebar menyesuaikan konten yang ada di dalamnya.

height: auto berbeda: tinggi elemen akan setara dengan total tinggi kontennya. Inilah mengapa elemen yang tidak diberi height akan otomatis "memanjang" ke bawah saat teks atau gambar di dalamnya bertambah banyak.

/* portofolio.css */
.seksi-tentang {
  width: auto;    /* memenuhi lebar container — ini sudah defaultnya */
  height: auto;   /* tinggi mengikuti konten — ini juga sudah defaultnya */
  padding: 24px;
}

Nilai persentase

Nilai persentase pada width dihitung relatif terhadap lebar containing block — biasanya elemen induk langsung. Ini sangat berguna untuk membuat layout yang fleksibel.

/* portofolio.css */
.foto-profil {
  width: 50%;     /* setengah lebar elemen induk */
  height: auto;   /* tinggi menyesuaikan proporsi gambar */
}

Persentase pada height lebih rumit. Agar height: 50% bekerja, elemen induk harus memiliki tinggi yang sudah ditentukan secara eksplisit. Jika tinggi induk juga auto, maka height: 50% akan diabaikan dan dihitung sebagai auto.

height: 100% tidak akan bekerja jika elemen induk tidak memiliki tinggi yang eksplisit. Ini adalah salah satu gotcha paling umum saat belajar CSS. Jika ingin elemen memenuhi tinggi viewport, gunakan height: 100vh sebagai gantinya.

Properti min-width dan max-width

Selain menentukan ukuran tetap, CSS menyediakan properti min-width dan max-width untuk membuat elemen yang lebih adaptif.

max-width membatasi lebar maksimum elemen. Elemen bisa lebih sempit dari nilai ini, tapi tidak bisa lebih lebar.

min-width menetapkan lebar minimum. Elemen tidak akan pernah lebih sempit dari nilai ini, meskipun kontennya sangat sedikit.

/* portofolio.css */
.container-utama {
  width: 100%;
  max-width: 960px;
  min-width: 320px;
  margin: 0 auto;
}

Pola ini sangat umum digunakan untuk container halaman: width: 100% memastikan elemen fleksibel di layar kecil, max-width mencegah baris teks menjadi terlalu panjang di layar besar, dan margin: 0 auto menempatkannya di tengah.

Urutan prioritas ketika ketiganya bertemu: min-width selalu menang atas max-width, dan max-width menang atas width.

.elemen-contoh {
  width: 500px;
  max-width: 300px;  /* max-width menang — lebar aktual: 300px */
  min-width: 400px;  /* min-width menang atas keduanya — lebar aktual: 400px */
}

Ringkasan properti sizing

Properti	Fungsi	Nilai default
`width`	Lebar area konten	`auto`
`height`	Tinggi area konten	`auto`
`min-width`	Batas lebar minimum	`0`
`max-width`	Batas lebar maksimum	`none`
`min-height`	Batas tinggi minimum	`0`
`max-height`	Batas tinggi maksimum	`none`

Properti min-height dan max-height

Sepasang properti serupa juga tersedia untuk dimensi vertikal: min-height dan max-height.

min-height sangat berguna untuk kartu atau section yang harus memiliki tinggi minimum tertentu meskipun kontennya sedikit. max-height digunakan untuk membatasi tinggi elemen — misalnya area teks yang bisa di-scroll.

/* portofolio.css */
.kartu-proyek {
  min-height: 180px;   /* kartu tidak terlalu pendek meski konten minim */
  max-height: 400px;   /* batasi jika konten sangat panjang */
  overflow: auto;      /* tampilkan scrollbar jika konten meluap */
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}

Lebih sering menggunakan min-height daripada height untuk elemen yang kontennya bisa bervariasi — seperti kartu artikel, komentar, atau deskripsi produk. Ini membuat elemen tidak "mengecil" saat konten sedikit, tapi tetap bisa berkembang ke bawah saat kontennya banyak.

Lebar Elemen Inline

Satu hal yang perlu diperhatikan: width dan height tidak berlaku untuk elemen inline seperti <span>, <a>, atau <strong>. Browser akan mengabaikan deklarasi tersebut.

/* ini tidak akan berpengaruh */
span {
  width: 200px;   /* diabaikan untuk elemen inline */
  height: 50px;   /* diabaikan untuk elemen inline */
}

Untuk membuat elemen inline memiliki lebar dan tinggi, ubah dulu properti display-nya menjadi block, inline-block, atau nilai lain yang memungkinkan elemen menerima dimensi. Topik display akan dibahas lengkap di Bab 22.

Latihan

Tiga latihan berikut akan membantu memperkuat pemahaman tentang cara width dan height bekerja dalam konteks yang berbeda.

Buat sebuah <div> dengan width: 300px dan height: 150px. Tambahkan padding: 20px dan border: 2px solid black. Hitung berapa ukuran total elemen yang ditampilkan di layar. Tambahkan background-color agar perbedaan antara area konten dan padding terlihat jelas.
Buat container dengan width: 100% dan max-width: 800px, lalu letakkan beberapa <p> di dalamnya. Amati bagaimana container berperilaku di berbagai lebar jendela browser. Tambahkan margin: 0 auto dan lihat efeknya.
Buat dua kartu berdampingan, masing-masing dengan width: 45%. Satu kartu berisi teks pendek, satu berisi teks panjang. Gunakan min-height agar kartu yang isinya sedikit tetap punya tinggi yang konsisten.

width, height, dan pasangan min/max-nya memberikan kontrol atas dimensi setiap elemen. Tapi kamu mungkin mulai bertanya-tanya: jika width hanya mengatur area konten, dan padding ditambahkan di luar itu, lalu border di luar padding — bagaimana cara menghitung ukuran total elemen secara tepat? Model perhitungan ini punya nama tersendiri, dan memahaminya akan mengubah cara kamu mendekati layout selamanya. Itulah yang akan kita bongkar di bab berikutnya: CSS Box Model.

BAB 13: Height dan Width

Properti width dan height

Nilai auto

Nilai persentase

Properti min-width dan max-width

Ringkasan properti sizing

Properti min-height dan max-height

Lebar Elemen Inline

Latihan

Referensi