Beranda / CSS / Pemrograman / Web

Mengenal CSS Height, Width, dan Max-Width: Biar Layout Web Nggak Ngaco! (Tutorial CSS Part 24)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 24 : Logo CSS

Kalau kamu lagi belajar CSS atau lagi ngulik layout website, pasti sering banget nemu properti height, width, dan max-width. Tiga properti ini mungkin kelihatannya sepele, tapi sebenarnya penting banget buat nentuin ukuran elemen biar tampilannya rapi, responsif, dan enak dilihat.

Di artikel ini, kita bakal kupas tuntas tentang:

  1. Cara setting height dan width di CSS
  2. Nilai-nilai yang bisa dipakai untuk height dan width
  3. Cara pakai max-width biar layout tetap responsif
  4. Tabel lengkap properti dimensi di CSS

1. Setting Height dan Width di CSS

Properti height dan width di CSS berfungsi buat ngatur tinggi dan lebar suatu elemen. Bisa kamu pakai di hampir semua elemen HTML kayak <div>, <img>, <section>, dan lainnya. 

.box {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

Dengan kode di atas, elemen yang punya class box bakal punya lebar 300px dan tinggi 200px. Gampang kan?

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="box">Ini kotak ukuran 300x200</div>
</body>
</html>

Hasilnya:

Contoh CSS height dan width
Gambar 24.1 : Contoh CSS Height dan width

2. Nilai-nilai CSS Height dan Width

CSS itu fleksibel banget. Kita bisa pakai berbagai jenis nilai tergantung kebutuhan. Nih beberapa jenis nilai yang umum dipakai:

Jenis Nilai Contoh Penjelasan
px width: 200px; Ukuran absolut dalam piksel
% width: 50%; Ukuran relatif terhadap parent element
em/rem width: 20em; Berdasarkan ukuran font
vw/vh width: 100vw; Berdasarkan ukuran viewport (lebar/tinggi layar)
auto height: auto; Otomatis sesuai konten
max-content width: max-content; Lebar maksimum sesuai isi
min-content width: min-content; Lebar minimum sesuai isi

Contoh Praktis:

.container {
  width: 80%;
  height: auto;
}

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .relative {
      width: 50%;
      height: auto;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="relative">Lebar 50% dari elemen induk, tinggi otomatis</div>
</body>
</html>

Hasilnya:

Contoh CSS width menggunakan persen
Gambar 24.2 : Contoh CSS width menggunakan persen

3. Setting Max-Width: Supaya Nggak Kebablasan

Properti max-width ini ibarat rem. Dia bisa ngebatesin lebar maksimum elemen, meskipun kamu udah atur lebar pakai % atau auto. 

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Penjelasan:

  • width: 100%; bikin elemen ngikutin lebar parent-nya
  • max-width: 1200px; ngebatesin maksimalnya biar nggak lebih dari 1200px
  • margin: 0 auto; buat center elemen

Properti ini life-saver banget kalau kamu bikin layout yang fleksibel di berbagai ukuran layar.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrapper {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      background-color: #f2f2f2;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    Konten ini bakal menyesuaikan layar, tapi maksimal lebarnya cuma 800px.
  </div>
</body>
</html>

Hasilnya:

Contoh CSS max-width
Gambar 24.3 : Contoh CSS max-width

4. Tabel Lengkap Properti Dimensi di CSS

Nah, biar makin lengkap, ini dia tabel semua properti dimensi yang umum dipakai di CSS:

Properti Fungsi
width Mengatur lebar elemen
height Mengatur tinggi elemen
min-width Menentukan lebar minimum
max-width Menentukan lebar maksimum
min-height Menentukan tinggi minimum
max-height Menentukan tinggi maksimum
box-sizing Mengatur apakah padding dan border ikut dihitung dalam ukuran total

Bonus: Box-Sizing

Biasanya ukuran elemen dihitung tanpa padding dan border. Tapi kalau kamu pengen padding dan border ikut masuk hitungan, tambahin ini: 

* {
  box-sizing: border-box;
}

Dengan box-sizing: border-box;, kamu nggak perlu pusing ngitung ulang lebar total elemen. Semua udah diatur otomatis. Mantap, kan?

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .dimensi {
      width: 300px;
      min-height: 100px;
      max-height: 200px;
      padding: 20px;
      border: 2px solid black;
      background-color: #ffe4b5;
    }
  </style>
</head>
<body>
  <div class="dimensi">
    Ini elemen dengan min-height 100px dan max-height 200px. Coba isi kontennya banyak untuk lihat efeknya!
  </div>
</body>
</html>

Hasilnya:

Contoh CSS border-box
Gambar 24.4 : Contoh CSS border-box

Penutup

Nah, itu dia pembahasan lengkap soal CSS height, width, dan max-width. Properti-properti ini kelihatannya simpel, tapi krusial banget buat bikin website yang enak dilihat, responsif, dan nggak berantakan di berbagai ukuran layar.

Kalau kamu udah ngerti cara pakai dan kombinasi nilainya, dijamin proses ngedesain layout bakal jauh lebih mudah. Yuk, sekarang coba praktik langsung biar makin paham!

Butuh panduan lain soal CSS? Tinggal komentar aja, ya. 😉

Posting Komentar untuk "Mengenal CSS Height, Width, dan Max-Width: Biar Layout Web Nggak Ngaco! (Tutorial CSS Part 24)"