Dokumentasi CSS interaktif: Width dan Height

Q: Apa perbedaan width: 100% dan width: auto?

Untuk elemen blok, auto mengisi container termasuk padding dan border-nya. width: 100% mengatur lebar isi sama dengan lebar container, jadi dengan box-sizing: content-box yang merupakan default, padding atau border apa pun membuat elemennya meluap.

Q: Apa perbedaan width dan max-width?

width mengatur ukuran yang pasti. max-width mengatur batas atas: elemennya bisa lebih sempit, misalnya di ponsel, tetapi tidak pernah lebih lebar. width: 100%; max-width: 600px; mengisi layar kecil dan berhenti di 600px pada layar besar.

Q: Bagaimana cara membuat elemen setinggi layar penuh?

Pakai min-height: 100vh (atau 100dvh supaya toolbar browser ponsel ikut diperhitungkan). Dengan min-height, bukan height, bagian itu bisa membesar kalau isinya lebih tinggi dari layar.

CSS Height dan Width: Penjelasan min, max, % dan auto

width dan height mengatur ukuran kotak sebuah elemen. Pelajari ukuran tetap dan persentase, kenapa height: 100% sering tidak berpengaruh, min-height dan max-width untuk layout yang fleksibel, auto vs 100%, dan kata kunci fit-content.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Mengatur width dan height

width dan height mengatur ukuran content box sebuah elemen. Secara default, padding dan border ditambahkan di luar ukuran itu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

Kotaknya berukuran 260 kali 100 piksel: isi 240 kali 80 ditambah padding 10px di setiap sisi. Dengan box-sizing: border-box, ukurannya akan tepat 240 kali 80. Halaman box model menjelaskan keduanya.

Nilai

Nilai	Contoh	Arti
`auto`	`width: auto`	Default. Blok mengisi lebar container-nya, tinggi menyesuaikan isinya
Panjang	`300px`, `20rem`	Ukuran tetap
Persentase	`50%`	Dari lebar containing block (untuk `width`) atau tingginya (untuk `height`)
Satuan viewport	`100vh`, `50vw`, `100dvh`	Dari jendela browser
`min-content`	`width: min-content`	Sesempit mungkin, kata terpanjang yang menentukan
`max-content`	`width: max-content`	Selebar isinya dalam satu baris
`fit-content`	`width: fit-content`	Seperti `max-content`, tetapi tidak pernah lebih lebar dari container

Kenapa height: 100% tidak berpengaruh

height persentase butuh elemen induk dengan tinggi yang pasti sebagai acuan persentasenya. Saat tinggi elemen induk bernilai auto, yang merupakan kondisi normal, height: 100% pada child juga berperilaku sebagai auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

Child pertama hanya setinggi teksnya. Child kedua mengisi elemen induknya karena elemen induk itu punya tinggi. Agar rantai persentase di seluruh halaman berfungsi, setiap ancestor sampai html dan body butuh tinggi, itulah sebabnya sebagian besar layout memakai flexbox atau grid: child-nya meregang untuk mengisi ruang tanpa persentase apa pun.

min-height dan max-width: ukuran yang fleksibel

Ukuran yang tetap mudah rusak: tinggi yang tetap akan meluap saat teksnya lebih panjang dari perkiraan, dan lebar yang tetap terlalu lebar untuk ponsel. Property min- dan max- mengatur batas, bukan ukuran yang pasti.

Property	Arti
`min-width`	Tidak pernah lebih sempit dari ini
`max-width`	Tidak pernah lebih lebar dari ini
`min-height`	Tidak pernah lebih pendek dari ini, tetapi bisa membesar
`max-height`	Tidak pernah lebih tinggi dari ini (isi yang berlebih akan meluap)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Di layar yang lebih sempit dari 360px, seperti ponsel, kartunya ikut menyusut, karena max-width hanyalah batas atas.

Kalau ukuran dan batas berlaku bersamaan, batasnya yang menang: max-width mengalahkan width, dan min-width mengalahkan max-width.

width: auto vs width: 100%

Untuk elemen blok, membiarkan width bernilai auto hampir selalu menjadi pilihan yang tepat. auto memasukkan seluruh kotak, termasuk padding dan border, ke dalam container. 100% membuat isi-nya selebar container, lalu menambahkan padding dan border di atasnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% tetap berguna pada elemen yang secara default bukan blok (<input>, <img>, inline-block), idealnya bersama box-sizing: border-box.

Menyesuaikan ukuran dengan isi: fit-content

Untuk membuat blok hanya selebar teksnya, tanpa mengubahnya menjadi inline-block, pakai fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content bersama margin-inline: auto menengahkan label atau blok mirip tombol yang lebarnya tetap persis selebar teksnya.

Bagian setinggi layar dan satuan viewport

vh adalah 1% dari tinggi viewport dan vw 1% dari lebarnya. Di ponsel, bar alamat browser membesar dan mengecil saat kamu men-scroll, jadi 100vh bisa lebih tinggi daripada yang terlihat. Satuan dinamis dvh mengikuti area yang terlihat, dan svh memakai tinggi terlihat yang terkecil:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Pakai min-height, bukan height, untuk bagian layar penuh, supaya layar kecil dengan banyak teks tetap mendapat bagian yang bisa membesar. Tinggi yang tetap dengan isi yang tidak muat akan tumpah keluar, dan itulah yang ditangani di halaman CSS overflow.

Kesalahan yang sering terjadi

height: 100% di dalam elemen induk tanpa tinggi. Nilainya berperilaku sebagai auto. Beri elemen induk sebuah tinggi atau pakai flex atau grid.
width: 100% ditambah padding. Elemennya meluap dari container. Biarkan lebar blok bernilai auto, atau pakai box-sizing: border-box.
Tinggi tetap pada container teks. Pakai min-height supaya teks yang lebih panjang atau font yang lebih besar tidak tumpah keluar.
width pada elemen inline. <span> dan <a> mengabaikan width dan height. Ubah menjadi inline-block atau block.
width: 1200px pada wrapper halaman. Halamannya bisa di-scroll ke samping di setiap ponsel. Pakai max-width: 1200px.

Pertanyaan yang sering diajukan

Kenapa height: 100% tidak berfungsi?

Tinggi persentase adalah persentase dari tinggi elemen induk, dan hanya berfungsi saat tinggi itu sudah pasti. Kalau tinggi elemen induk bernilai auto (ditentukan oleh isinya), persentasenya diperlakukan sebagai auto. Beri elemen induk sebuah tinggi, atau pakai flexbox atau grid, yang meregangkan child tanpa persentase.

Apa perbedaan width: 100% dan width: auto?

Untuk elemen blok, auto mengisi container termasuk padding dan border-nya. width: 100% mengatur lebar isi sama dengan lebar container, jadi dengan box-sizing: content-box yang merupakan default, padding atau border apa pun membuat elemennya meluap.

Apa fungsi min-height di CSS?

Property ini mengatur tinggi terkecil yang boleh dimiliki elemen, sambil tetap membiarkannya membesar mengikuti isinya. min-height: 200px memberi kartu kosong tinggi 200px, dan kartu yang berisi lebih banyak teks menjadi lebih tinggi alih-alih meluap, sesuatu yang tidak bisa dilakukan height yang tetap.

Apa perbedaan width dan max-width?

width mengatur ukuran yang pasti. max-width mengatur batas atas: elemennya bisa lebih sempit, misalnya di ponsel, tetapi tidak pernah lebih lebar. width: 100%; max-width: 600px; mengisi layar kecil dan berhenti di 600px pada layar besar.

Bagaimana cara membuat elemen setinggi layar penuh?

Pakai min-height: 100vh (atau 100dvh supaya toolbar browser ponsel ikut diperhitungkan). Dengan min-height, bukan height, bagian itu bisa membesar kalau isinya lebih tinggi dari layar.

Konsep terkait