Tutorial CSS / Lebar, Tinggi, Batas min/max, dan box-sizing CSS

Properti width dan height pada CSS menetapkan dimensi yang diinginkan, sementara min-width, max-width, min-height, dan max-height menetapkan batas. Dengan box-sizing: border-box, dimensi yang ditentukan sudah mencakup padding dan border, tetapi batas tinggi masih memerlukan strategi overflow yang disengaja.

Bandingkan content-box dan border-box

Berikan kedua kartu width: 300px, padding 20px di setiap sisi, dan border 2px. Dengan content-box, kontennya 300px dan border-boxnya 344px. Dengan border-box, border-boxnya 300px dan kontennya 256px. Margin berada di luar lebar yang dideklarasikan dalam kedua kasus. Lihat Model Kotak CSS: Konten, Padding, Border, dan Margin.

border-box menyimpan padding dan border di dalam ukuran yang ditentukan. Meningkatkan padding mengurangi lebar konten yang tersedia dan dapat meningkatkan pembungkusan (wrapping). Jika padding dan border saja melebihi lebar yang ditentukan, konten tidak bisa menjadi negatif, sehingga kotak sebenarnya bisa melebihi lebar tersebut. Lihat MDN: box sizing.

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

Aturan umum yang dapat digunakan untuk menyatukan metode perhitungan di dokumen baru. Kami juga menyertakan elemen semu agar dihitung dengan cara yang sama. Jika Anda menerapkannya ke halaman yang ada secara batch, tata letak yang dibuat berdasarkan content-box mungkin berubah, jadi periksa dulu area yang dibutuhkan. Contoh lengkap menerapkan aturan umum, tetapi menetapkan content-box hanya ke .content untuk perbandingan.

Tetapkan lebar yang menyesuaikan ruang dan batas minimum atau maksimum

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% didasarkan pada lebar blok yang menampungnya, dan max-width membatasinya agar tidak tumbuh lebih besar di layar lebar. Dengan kondisi bahwa ukuran font root adalah 16px, 32rem adalah 512px. min-width adalah batas bawah seberapa kecil elemennya bisa. Bahkan jika layar lebih sempit dari 180px, mempertahankan lebar minimum dapat menyebabkan overflow horizontal.

Batas minimum menang ketika bertentangan dengan maksimum: min-width: 360px dengan max-width: 320px tidak membiarkan kotak menyusut di bawah 360px. Batas tinggi yang sesuai berperilaku serupa. Ukuran minimum otomatis Flexbox dan Grid memerlukan pengecekan sendiri; gunakan min-width: 0 bila diperlukan. Lihat MDN: min width, MDN: min height.

Bandingkan tinggi otomatis, tetap, dan terbatas

Batas tinggi tidak otomatis menghapus teks yang meluap. Pengaturan overflow default mungkin menampilkannya di luar kotak; hidden bisa memotong informasi yang diperlukan pembaca. Saat menggabungkan max-height dengan pengguliran, juga periksa akses keyboard dan interaksi seluler. Contoh lengkap meninggalkan ruang ekstra setelah kotak sehingga Anda dapat mengamati kegagalan tinggi tetap. Jika sebuah kotak tidak menyusut seperti yang diharapkan, juga tinjau Overflow CSS, Pembungkusan Teks Panjang, dan Elipsis.

Pahami kondisi tinggi persentase

.height-parent { height: 200px; }

.half { height: 50%; }

Dalam aliran blok normal, sebuah elemen induk dengan tinggi 200px secara eksplisit memungkinkan height: 50% anak untuk terselesaikan menjadi 100px. Jika tinggi induk bergantung pada konten, perhitungan sederhana tersebut biasanya terselesaikan sebagai auto. Min-height saja tidak memberikan kondisi yang sama. Posisi absolut, Flexbox, dan Grid dapat memiliki aturan penyelesaian persentase yang berbeda. Lihat MDN: height.

Jalankan contoh dan bandingkan dimensinya

Simpan kode di bawah sebagai UTF-8 di sizing.html. Ini mencakup dua perhitungan lebar, batas ukuran, dan perbandingan tinggi dengan pernyataan yang sama.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Periksa lebar aktual dari .content dan .border di jendela yang lebar. Masing-masing adalah 344px dan 300px. Jika Anda hanya mengubah padding dari content-box menjadi 30px, itu akan menjadi 364px, dan lebar luar dari border-box akan tetap 300px bahkan setelah perubahan yang sama.
2. Perkecil lebar jendela untuk melihat apakah .fluid menyusut bersama induknya. Di jendela yang lebar dengan root 16px, maksimum adalah 512px. Jika Anda sementara mengubah min-width di .limits menjadi 360px, itu akan lebih besar dari max-width 320px. Kembalikan ke 180px.
3. Tambahkan kalimat yang sama ke empat kotak perbandingan tinggi. Tinggi tetap seharusnya meluap keluar batas, auto dan min-height seharusnya bertambah sesuai kebutuhan, dan panel max-height seharusnya dapat dibaca dengan pengguliran internal.
4. Hapus height: 200px dari elemen induk. Periksa bahwa tinggi 50% dari anak tidak lagi tetap 100px, dan kembalikan deklarasi aslinya untuk memastikan tinggi kembali menjadi 100px.
5. Perbesar halaman dengan zoom browser, atau ubah ukuran font pada aturan body dari 16px menjadi 20px. Amati masalah teks pada kotak tinggi tetap, lalu bandingkan dengan tinggi auto. Mengubah ukuran font bawaan browser saja belum tentu mengubah teks body yang sudah ditetapkan 16px. Kembalikan pengaturan setelah perbandingan.

width: 100%, tetapi jika meluap secara horizontal, periksa box-sizing, margin kiri dan kanan, min-width yang besar, dan string panjang dalam urutan itu. Jangan bingung antara ukuran konten yang ditampilkan di Developer Tools dengan ukuran border. Setelah mengubah nilai, kembalikan ke deklarasi asli untuk mempertahankan kondisi perbandingan.