Width adalah lebar — ukuran elemen ke arah horizontal (kiri ke kanan), sedangkan height adalah tinggi — ukuran elemen ke arah vertikal (atas ke bawah). Dalam bahasa Indonesia, width diterjemahkan sebagai “lebar” dan height sebagai “tinggi”; di dunia web, keduanya adalah properti CSS paling dasar untuk menentukan dimensi sebuah elemen di halaman.

Terjemahannya memang sesederhana itu, tapi praktiknya di CSS penuh jebakan: kenapa height: 100% sering tidak berefek? Kenapa padding bikin kotak melebihi ukuran yang kamu tulis? Kapan pakai px, kapan %, kapan vw? Dan kenapa memberi tinggi tetap pada elemen hampir selalu berakhir dengan teks yang meluber keluar kotak? Artikel ini membahas semuanya dari nol — mulai dari arti kata, cara menulisnya di CSS, satuan-satuan ukurannya, min-/max-, box-sizing, sampai daftar kesalahan umum beserta solusinya. Semua contoh kode bisa langsung kamu coba.

Width dan Height Adalah… (Arti dalam Bahasa Indonesia)

Width dan height adalah dua istilah dimensi: width berarti lebar (jarak sisi kiri ke sisi kanan, arah horizontal) dan height berarti tinggi (jarak sisi atas ke sisi bawah, arah vertikal). Di CSS, keduanya menjadi properti untuk mengatur ukuran content box sebuah elemen — misalnya width: 300px; height: 150px; menghasilkan kotak selebar 300 piksel dan setinggi 150 piksel.

Supaya tidak tertukar lagi, ini ringkasannya:

Istilah	Bahasa Indonesia	Arah	Contoh di kehidupan nyata
`width`	Lebar	Horizontal (kiri–kanan)	Lebar pintu, lebar layar HP
`height`	Tinggi	Vertikal (atas–bawah)	Tinggi badan, tinggi gedung

Pertanyaan yang paling sering muncul: width itu panjang atau lebar? Jawabannya: lebar. Kata “panjang” dalam bahasa Inggris adalah length, dan menariknya CSS tidak punya properti bernama length untuk elemen — yang ada hanya width (lebar) dan height (tinggi), karena elemen web hidup di bidang dua dimensi layar. Jadi kalau kamu melihat form upload yang meminta “width × height”, bacalah sebagai “lebar × tinggi”. Misalnya gambar berukuran 1920 × 1080 artinya lebar 1920 piksel dan tinggi 1080 piksel.

Satu catatan kecil soal ejaan: width sering salah ketik jadi widht, dan height jadi heigth. Di percakapan sehari-hari tidak masalah, tapi di CSS ini fatal secara diam-diam — browser mengabaikan properti yang salah ketik tanpa menampilkan error apa pun, sehingga kamu bisa menghabiskan waktu lama bertanya-tanya kenapa ukurannya “tidak jalan”. Kalau sebuah deklarasi terasa tidak berefek, cek ejaannya dulu di DevTools; properti yang tidak dikenali biasanya ditampilkan tercoret.

Sekarang kita masuk ke bagian yang lebih menarik: bagaimana kedua properti ini benar-benar bekerja di CSS.

Cara Menulis Width dan Height di CSS

Cara mengatur width dan height di CSS: tulis nama properti diikuti nilai dan satuannya di dalam blok selector, misalnya width: 300px; dan height: 200px;. Nilainya bisa berupa angka dengan satuan (px, %, rem, vw, vh, dan lainnya), kata kunci auto, atau fungsi seperti calc().

Contoh paling dasar:

<div class="kotak">Halo, aku sebuah kotak.</div>

.kotak {
  width: 300px;
  height: 150px;
  background: #3b82f6;
  color: white;
  padding: 16px;
}

Kotak biru itu akan berukuran lebar 300px dan tinggi 150px… hampir. Nanti kita bahas di bagian box-sizing kenapa padding membuat ukuran aslinya sedikit lebih besar — ini salah satu kejutan terbesar bagi pemula.

Sebelum lanjut, ada dua perilaku default yang wajib kamu pahami, karena keduanya menjelaskan “kenapa elemenku ukurannya begini padahal aku belum menulis apa-apa”:

Elemen block (seperti div, p, section) secara default melebar penuh mengisi lebar induknya — seolah-olah width: 100%-ish (tepatnya width: auto). Makanya div kosong pun membentang dari kiri ke kanan.
Tinggi elemen secara default mengikuti kontennya. Tanpa height eksplisit, kotak akan setinggi teks/gambar di dalamnya — tidak lebih, tidak kurang. Ini perilaku yang justru sehat, dan nanti kita bahas kenapa melawannya sering jadi sumber bug.

Satu lagi yang sering bikin bingung: width dan height tidak berefek pada elemen inline seperti span dan a (yang bukan gambar). Elemen inline mengalir mengikuti teks, jadi ukurannya ditentukan kontennya. Kalau kamu butuh memberi ukuran pada span, ubah dulu display-nya:

span.badge {
  display: inline-block; /* sekarang width & height berfungsi */
  width: 80px;
  height: 24px;
}

Konsep dasar ini — plus latihan langsung di editor interaktif — dibahas runtut di lesson height dan width di Hyper Sheets, cocok kalau kamu tipe yang belajar sambil praktik. Dan kalau HTML-nya sendiri masih terasa asing, mulai dulu dari panduan belajar HTML untuk pemula.

Satuan Ukuran: px, %, rem, vw, dan vh

Satuan yang paling sering dipakai untuk width dan height adalah px (piksel, ukuran tetap), % (persentase dari elemen induk), rem (kelipatan ukuran font root), serta vw dan vh (persentase dari lebar dan tinggi viewport). Tidak ada satuan yang “paling benar” — masing-masing punya perannya, dan developer berpengalaman mencampur semuanya sesuai kebutuhan.

px — Piksel, Ukuran Tetap

.avatar {
  width: 48px;
  height: 48px;
}

px memberikan ukuran pasti yang tidak berubah mengikuti layar atau elemen lain. Cocok untuk hal-hal yang memang harus konsisten: ikon, avatar, border, thumbnail. Kurang cocok untuk container besar seperti kolom konten, karena width: 900px yang cantik di laptop akan meluber di layar HP selebar 390px.

% — Persentase dari Elemen Induk

.sidebar {
  width: 25%; /* seperempat dari lebar elemen induknya */
}

Poin krusial yang wajib digarisbawahi: persentase selalu dihitung dari elemen induk (parent), bukan dari layar. width: 50% di dalam container selebar 600px menghasilkan 300px — bukan setengah layar. Dan khusus untuk height, persentase hanya bekerja kalau induknya punya tinggi yang jelas. Inilah akar dari misteri legendaris “height: 100% kok tidak ngefek?” yang kita bedah tuntas di bagian kesalahan umum.

rem — Relatif ke Ukuran Font Root

.card {
  width: 20rem; /* 20 × ukuran font root; umumnya 20 × 16px = 320px */
  padding: 1.5rem;
}

1rem sama dengan ukuran font elemen root (html), yang di hampir semua browser default-nya 16px. Keunggulannya: kalau pengguna memperbesar ukuran font di pengaturan browser (misalnya karena kebutuhan aksesibilitas), semua ukuran ber-rem ikut membesar proporsional. Karena itu rem jadi satuan favorit untuk spacing, ukuran teks, dan lebar komponen di banyak codebase modern — skala ukuran default Tailwind CSS pun dibangun di atasnya.

vw dan vh — Persentase dari Viewport

.hero {
  width: 100vw;  /* selebar viewport (jendela browser) */
  height: 100vh; /* setinggi viewport */
}

1vw = 1% lebar viewport, 1vh = 1% tinggi viewport. Berbeda dari % yang menghitung dari induk, vw/vh selalu menghitung dari jendela browser — di mana pun elemennya berada. height: 100vh adalah resep klasik untuk hero section satu layar penuh.

Dua catatan praktis: pertama, 100vw menghitung lebar termasuk area scrollbar vertikal di sebagian sistem, sehingga kadang memunculkan scroll horizontal tipis — seringnya width: 100% pada elemen top-level sudah cukup dan lebih aman. Kedua, di browser mobile tinggi viewport berubah-ubah saat address bar muncul/menghilang; CSS modern menyediakan varian svh, lvh, dan dvh untuk menangani ini (100dvh mengikuti tinggi dinamis viewport). Kalau mau melihat langsung bagaimana tiap satuan viewport bereaksi saat jendela di-resize, coba mainkan playground viewport units — jauh lebih cepat paham daripada membaca definisinya.

Bonus: calc() untuk Mencampur Satuan

.content {
  width: calc(100% - 250px); /* penuh, dikurangi lebar sidebar 250px */
}

calc() memungkinkan kamu berhitung lintas satuan. Berguna untuk layout “sisa ruang” sederhana — meskipun untuk kasus seperti ini, layout modern biasanya lebih nyaman pakai Flexbox, yang kita bahas panduan lengkapnya di artikel terpisah.

Nilai auto: Ukuran yang Menghitung Dirinya Sendiri

width: auto dan height: auto berarti browser yang menghitung ukurannya: untuk elemen block, width: auto mengisi lebar induk yang tersedia, sedangkan height: auto menyesuaikan tinggi konten. Ini nilai default kedua properti, dan memahaminya penting karena auto sering kali justru jawaban yang benar — bukan sesuatu yang harus “dikalahkan”.

Perhatikan bedanya dengan 100%:

.a { width: auto; }  /* lebar induk DIKURANGI margin — tidak pernah meluber */
.b { width: 100%; }  /* 100% lebar konten induk — bisa meluber kalau
                        elemen ini masih punya padding/border/margin sendiri */

Pada elemen block, width: auto berarti “isi ruang yang tersedia dengan memperhitungkan margin, border, dan padding-ku” — hasilnya selalu pas. Sedangkan width: 100% berarti “lebarku = lebar area konten induk”, lalu padding dan margin milik elemen itu ditambahkan lagi di atasnya (pada box model default), sehingga totalnya bisa melebihi induk dan memunculkan scroll horizontal. Kalau kamu pernah menulis width: 100% lalu elemennya malah keluar jalur, sekarang kamu tahu kenapa.

height: auto juga punya peran penting pada gambar responsif:

img {
  max-width: 100%;
  height: auto; /* tinggi menyesuaikan, rasio gambar tetap terjaga */
}

Tanpa height: auto, gambar yang atribut height-nya di-set di HTML akan gepeng saat lebarnya menyusut. Duo max-width: 100% + height: auto ini adalah salah satu snippet CSS paling sering ditulis di dunia — hafalkan.

Kesimpulan praktisnya: biarkan auto bekerja sebisa mungkin, terutama untuk tinggi. Tentukan lebar, biarkan tinggi mengikuti konten. Prinsip satu kalimat ini mencegah mayoritas bug layout yang akan kita lihat di bagian kesalahan umum.

min-width, max-width, min-height, max-height: Memberi Batas, Bukan Angka Mati

min-width/min-height menetapkan ukuran minimum yang tidak boleh dilewati ke bawah, sedangkan max-width/max-height menetapkan ukuran maksimum yang tidak boleh dilewati ke atas. Alih-alih memaksa satu angka pasti, kamu memberi rentang — dan membiarkan browser memilih ukuran terbaik di dalam rentang itu. Ini fondasi desain responsif yang sesungguhnya.

Pola paling terkenal — kolom konten yang nyaman dibaca:

.article {
  width: 100%;        /* di layar sempit: penuh */
  max-width: 720px;   /* di layar lebar: berhenti di 720px */
  margin: 0 auto;     /* sisanya dipakai untuk menengahkan */
  padding: 0 16px;
}

Tiga baris pertama itu menghasilkan perilaku yang dulu butuh media query: di HP kontennya memenuhi layar, di monitor lebar kontennya berhenti melebar di 720px dan duduk manis di tengah. Tidak ada breakpoint, tidak ada JavaScript.

Pola kedua yang sudah kita singgung — min-height untuk area yang “minimal setinggi layar”:

.hero {
  min-height: 100vh; /* minimal satu layar; kalau kontennya panjang, silakan tumbuh */
}

Bandingkan dengan height: 100vh yang kaku: begitu kontennya lebih tinggi dari layar (misalnya di HP kecil atau saat teksnya dua bahasa), konten akan meluber keluar. min-height memberi jaminan tinggi minimum tanpa melarang elemen tumbuh. Untuk kasus tinggi, hampir selalu min-height yang kamu inginkan, bukan height.

Aturan main saat properti-properti ini “bertengkar” juga jelas dan layak dihafal: min-* mengalahkan max-*, dan keduanya mengalahkan width/height biasa. Jadi kalau kamu menulis width: 500px; max-width: 300px;, hasil akhirnya 300px. Kalau min-width: 400px; max-width: 300px;, yang menang min-width — hasilnya 400px.

max-height sendiri paling sering muncul berpasangan dengan overflow untuk membuat area yang bisa di-scroll:

.chat-box {
  max-height: 400px;
  overflow-y: auto; /* kalau isi melebihi 400px, munculkan scrollbar */
}

Tanpa overflow-y, konten yang melebihi max-height akan tetap terlihat meluber keluar kotak. Perilaku overflow ini punya banyak nuansa (visible, hidden, scroll, auto) yang dibahas terpisah di lesson overflow kalau kamu mau mendalaminya.

box-sizing: border-box — Kenapa Ukuran Kotakmu “Bohong”

Secara default (box-sizing: content-box), width dan height hanya mengukur area konten — padding dan border ditambahkan di luarnya, sehingga ukuran kotak yang tampil lebih besar dari angka yang kamu tulis. box-sizing: border-box mengubah aturannya: width/height mengukur sampai tepi border, seperti intuisi manusia normal. Ini konsep box model yang wajib dikuasai sebelum kamu bisa menebak ukuran elemen dengan akurat.

Bukti nyatanya:

.kartu {
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}

Berapa lebar kotak .kartu di layar? Bukan 300px, melainkan 344px: 300 (konten) + 20 + 20 (padding kiri-kanan) + 2 + 2 (border kiri-kanan). Angka width yang kamu tulis hanya berlaku untuk kontennya. Inilah sumber klasik layout dua kolom 50% + 50% yang tidak muat dalam satu baris — begitu salah satunya diberi padding, totalnya melebihi 100%.

Solusinya satu deklarasi:

.kartu {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}

Sekarang lebar total kotak benar-benar 300px — browser otomatis menyisakan ruang konten sebesar 256px (300 dikurangi padding dan border). Ukuran jadi bisa diprediksi, dan padding tidak lagi “menggendutkan” elemen.

Karena perilakunya jauh lebih intuitif, hampir semua proyek modern menerapkannya global sejak baris pertama CSS:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Snippet reset ini sudah jadi standar de facto industri — framework CSS populer pun menerapkannya. Kalau kamu mengikuti tutorial lama yang layout-nya “aneh”, cek dulu apakah reset ini ada.

Width, height, padding, border, dan margin bersama-sama membentuk CSS box model — mental model terpenting di seluruh CSS. Kamu bisa mempelajarinya bertahap di lesson box model, lalu memvisualisasikan lapisan-lapisannya secara interaktif di playground box model — geser slider padding/border/margin dan lihat bagaimana ukuran total kotak berubah secara langsung.

Praktik: Membuat Card Produk dengan Ukuran yang Terkontrol

Mari terapkan semuanya sekaligus: kita buat card produk yang lebarnya responsif (pakai width + max-width), gambarnya tidak pernah gepeng (aspect-ratio + object-fit), dan tingginya mengikuti konten (tanpa height tetap). Card seperti ini adalah komponen paling umum di web nyata — katalog toko, daftar artikel, grid portofolio — jadi polanya akan terus kamu pakai.

Langkah 1: Struktur HTML

<article class="card">
  <img
    class="card-img"
    src="kopi.jpg"
    alt="Segelas kopi susu di atas meja kayu"
  />
  <div class="card-body">
    <h3>Kopi Susu Gula Aren</h3>
    <p>Espresso, susu segar, dan gula aren asli. Manisnya pas.</p>
    <span class="harga">Rp 24.000</span>
  </div>
</article>

Langkah 2: Atur Lebar Card — Fleksibel tapi Terbatas

* { box-sizing: border-box; } /* fondasi: ukuran jadi bisa diprediksi */

.card {
  width: 100%;        /* isi ruang yang tersedia... */
  max-width: 320px;   /* ...tapi jangan lebih lebar dari 320px */
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;   /* supaya sudut gambar ikut membulat */
}

Perhatikan yang tidak kita tulis: height. Tinggi card dibiarkan auto — kalau nanti judul produknya dua baris, card tinggal memanjang dengan tenang. Ini keputusan desain, bukan kelalaian.

Langkah 3: Gambar dengan Tinggi Konsisten Tanpa Gepeng

Masalah klasik: foto produk datang dalam berbagai rasio, padahal kamu mau semua card terlihat seragam. Memberi width dan height mentah pada img akan memaksa rasio baru — hasilnya gambar penyok. Kombinasi yang benar:

.card-img {
  width: 100%;
  aspect-ratio: 4 / 3;  /* tinggi otomatis: selalu 3/4 dari lebar */
  height: auto;
  object-fit: cover;    /* isi area penuh, potong kelebihannya */
  display: block;
}

aspect-ratio menjaga perbandingan lebar-tinggi area gambar tetap 4:3 berapa pun lebar card-nya, dan object-fit: cover membuat foto mengisi area itu dengan cara di-crop rapi, bukan diregangkan. Duo ini menggantikan trik “padding-top persentase” jadul yang dulu dipakai untuk tujuan sama.

Langkah 4: Body Card

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.harga {
  font-weight: 700;
}

Berkat box-sizing: border-box di langkah 2, padding 16px ini tidak membuat card melebihi max-width: 320px-nya.

Langkah 5: Deretan Card

.katalog {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.katalog .card {
  flex: 1 1 260px; /* mulai 260px, melar & turun baris otomatis */
  max-width: 320px;
}

Hasil akhirnya: katalog yang di monitor lebar menampilkan beberapa kolom, di HP menumpuk satu kolom — tanpa satu pun media query, dan tanpa satu pun height tetap. Kalau kamu ingin meneruskan latihan ini jadi halaman utuh yang online, ikuti panduan membuat website pertama sampai tahap deploy.

Kesalahan Umum Saat Mengatur Width dan Height

Kesalahan paling umum seputar width dan height: memberi tinggi tetap pada elemen berisi teks, mengharapkan height: 100% bekerja tanpa induk yang bertinggi jelas, lupa box-sizing: border-box, dan memberi ukuran pada elemen inline. Hampir semua bug ukuran yang akan kamu temui di lapangan masuk salah satu daftar ini.

1. Height tetap pada konten yang bisa berubah — resep overflow

/* Rawan masalah */
.deskripsi {
  height: 120px; /* teks lebih panjang? meluber keluar kotak */
}

Konten itu hidup: teks bisa lebih panjang dari perkiraan, pengguna bisa memperbesar font, terjemahan bahasa lain bisa dua kali lipat panjangnya. height tetap membuat kotak tidak bisa menyesuaikan — teks akan menembus keluar atau terpotong. Solusi: biarkan tinggi auto, atau kalau memang butuh jaminan minimum, pakai min-height:

/* Aman */
.deskripsi {
  min-height: 120px; /* minimal 120px, boleh tumbuh */
}

Aturan praktisnya: atur lebar, biarkan tinggi mengalir. Kasus yang benar-benar butuh height tetap itu sedikit — ikon, avatar, elemen dekoratif — dan hampir semuanya tidak berisi teks.

2. height: 100% tidak bekerja

Kamu menulis height: 100% dan… tidak terjadi apa-apa. Penyebabnya: 100% dari apa? Persentase tinggi dihitung dari tinggi induk — dan kalau induknya sendiri height: auto (default), browser tidak punya angka acuan, sehingga 100% diabaikan. Dua jalan keluarnya:

/* Opsi A: beri tinggi eksplisit di seluruh rantai induk */
html, body {
  height: 100%;
}
.aplikasi {
  height: 100%; /* sekarang ada acuannya */
}

/* Opsi B (lebih praktis): pakai satuan viewport, tanpa peduli induk */
.aplikasi {
  min-height: 100vh; /* atau 100dvh untuk mobile yang lebih akurat */
}

Opsi B lebih populer karena tidak menuntut disiplin di seluruh rantai elemen. Ingat rumusnya: % bergantung pada induk, vh bergantung pada viewport.

3. Lupa box-sizing, layout persentase jadi tidak muat

width: 50% + width: 50% + padding = lebih dari 100% = kolom kedua jatuh ke bawah. Sudah kita bedah di bagian box model; solusinya reset box-sizing: border-box global. Kalau dua kolommu tiba-tiba menumpuk, cek ini pertama kali.

4. Memberi width/height pada elemen inline

span, a, strong — selama display-nya inline — mengabaikan width dan height sepenuhnya. Ubah ke inline-block (tetap mengalir dalam teks) atau block (ambil baris sendiri) dulu, baru ukurannya berfungsi. Daftar lengkap nilai display dan efeknya bisa kamu pelajari di lesson display.

5. width: 100vw yang memunculkan scroll horizontal

Di halaman yang punya scrollbar vertikal, 100vw bisa lebih lebar beberapa piksel dari area yang benar-benar terlihat (karena menghitung sampai di bawah scrollbar), memunculkan scroll horizontal tipis yang menjengkelkan. Untuk elemen yang induknya sudah selebar halaman, width: 100% — atau tidak menulis width sama sekali pada elemen block — hampir selalu lebih tepat.

6. Meregangkan gambar dengan width dan height sekaligus

/* Gambar penyok */
img.thumb { width: 200px; height: 200px; }

/* Gambar rapi */
img.thumb { width: 200px; height: 200px; object-fit: cover; }

Memaksa kedua dimensi pada gambar yang rasionya berbeda akan meregangkannya. Tambahkan object-fit: cover supaya gambar di-crop mengisi area, atau object-fit: contain supaya termuat utuh dengan ruang kosong.

7. Salah ketik: widht, heigth, hieght

Sudah disinggung di awal, tapi layak masuk daftar karena benar-benar sering terjadi: CSS tidak melempar error untuk properti yang tidak dikenali — deklarasi salah ketik hanya diabaikan diam-diam. Biasakan memverifikasi lewat DevTools: properti yang invalid ditampilkan tercoret dengan ikon peringatan.

FAQ Seputar Width dan Height

Width itu panjang atau lebar?

Width adalah lebar — ukuran ke arah horizontal (kiri ke kanan). “Panjang” dalam bahasa Inggris adalah length, istilah yang tidak dipakai untuk dimensi elemen di CSS. Pasangannya, height, adalah tinggi — ukuran ke arah vertikal. Jadi ukuran layar 1920 × 1080 dibaca: lebar 1920 piksel, tinggi 1080 piksel.

Apa bedanya width dan height?

Width mengatur dimensi horizontal elemen (jarak sisi kiri ke kanan), sedangkan height mengatur dimensi vertikalnya (jarak sisi atas ke bawah). Di CSS keduanya menerima jenis nilai yang sama (px, %, rem, vw/vh, auto), tapi perilaku default-nya berbeda: elemen block otomatis melebar mengisi induknya (width), sementara tingginya mengikuti isi kontennya (height).

Kenapa height: 100% tidak bekerja?

Karena persentase tinggi dihitung dari tinggi elemen induk, dan kalau induknya tidak punya tinggi eksplisit (masih height: auto), browser tidak punya acuan sehingga 100% diabaikan. Solusinya: beri tinggi pada seluruh rantai induk (html, body { height: 100%; }), atau lebih praktis, pakai satuan viewport seperti min-height: 100vh yang tidak bergantung pada induk.

Apa arti width: auto dan bedanya dengan width: 100%?

width: auto (default elemen block) berarti browser menghitung lebar agar elemen pas mengisi induknya setelah memperhitungkan margin, padding, dan border — sehingga tidak pernah meluber. width: 100% menyamakan lebar konten elemen dengan lebar konten induk, lalu padding/border/margin elemen ditambahkan di atasnya (pada box model default), yang bisa membuat totalnya melebihi induk. Kalau ragu di elemen block, biarkan auto.

Apa bedanya width dan max-width?

width menetapkan lebar target elemen, sedangkan max-width menetapkan batas atas yang tidak boleh dilampaui. Keduanya sering dipakai bersama untuk layout responsif: width: 100%; max-width: 720px; berarti “isi penuh di layar sempit, tapi berhenti melebar di 720px”. Kalau keduanya bertentangan, max-width menang atas width — dan min-width menang atas keduanya.

Bagaimana cara membuat elemen persegi (width dan height sama)?

Cara modernnya pakai properti aspect-ratio: tulis width: 200px; aspect-ratio: 1; dan tinggi otomatis mengikuti lebarnya — bahkan kalau lebarnya persentase yang berubah-ubah. Ini jauh lebih fleksibel daripada menulis width: 200px; height: 200px; manual, karena rasio tetap terjaga saat lebar berubah. Pelajari lebih dalam di lesson aspect-ratio.

Apakah menulis width dan height di atribut HTML img masih perlu?

Ya, tetap disarankan. Atribut width dan height pada tag img memberi tahu browser rasio gambar sebelum file-nya termuat, sehingga browser bisa memesan ruang dan halaman tidak “melompat” saat gambar muncul (mencegah layout shift). CSS max-width: 100%; height: auto; kemudian membuatnya tetap responsif — kombinasi atribut HTML plus CSS ini adalah praktik terbaik saat ini.

Langkah Selanjutnya

Kalau dirangkum dalam beberapa kalimat: width adalah lebar (horizontal), height adalah tinggi (vertikal); atur lebar dengan kombinasi width/max-width yang responsif, biarkan tinggi mengikuti konten (auto atau min-height), pahami bahwa % mengacu ke induk sedangkan vw/vh mengacu ke viewport, dan pasang box-sizing: border-box global supaya angka yang kamu tulis sama dengan ukuran yang tampil. Dengan lima prinsip itu, mayoritas masalah ukuran elemen sudah tertangani sebelum sempat terjadi.

Langkah paling logis berikutnya ada dua. Pertama, mantapkan box model — margin, border, padding, dan content — karena width/height hanyalah satu lapis dari sistem itu; lesson box model di Hyper Sheets membahasnya dengan latihan langsung di browser tanpa perlu setup apa pun. Kedua, begitu ukuran elemen sudah kamu kuasai, tantangan berikutnya adalah menyusun elemen-elemen itu jadi layout utuh — mulai dari panduan Flexbox untuk layout satu dimensi. Selamat ngoding!