Belajar CSS Bagian 19: CSS Height dan Width

Pada seri Belajar CSS bagian 18, kita telah membahas tentang CSS box model, yang menjadi dasar penting dalam memahami bagaimana setiap elemen di halaman web memiliki ruang dan jarak tersendiri. Melanjutkan pembahasan tersebut, di seri Belajar CSS bagian 19 ini, kita akan mempelajari CSS height dan width, dua properti penting yang berfungsi untuk mengatur ukuran tinggi dan lebar elemen.

Dengan memahami cara kerja height dan width, Anda dapat mengontrol tampilan layout dengan lebih presisi, sehingga desain website menjadi lebih rapi, proporsional, dan responsif. Simak hingga akhir seri belajar CSS bagian 19 ini, untuk meningkatkan skill layouting web design dengan CSS.

Kenapa Perlu Belajar CSS Height dan Width?

Setiap elemen HTML pada dasarnya memiliki ukuran yang bisa disesuaikan agar sesuai dengan kebutuhan desain website. Dua properti CSS yang paling sering digunakan untuk mengatur ukuran elemen adalah height (tinggi) dan width (lebar).

Kedua properti ini memungkinkan Anda menentukan seberapa besar area yang digunakan oleh sebuah elemen, sehingga tampilan konten bisa tersusun dengan lebih rapi, proporsional, dan responsif di berbagai ukuran layar.

Memahami cara kerja CSS height dan width juga memudahkan Anda dalam mengatur layout secara presisi, baik saat membuat desain statis maupun responsif. Selain itu, properti ini sering dikombinasikan dengan konsep lain seperti Box Model, properti display, flex layout, dan grid layout, untuk menciptakan tampilan yang lebih modern dan terstruktur.

Apa Itu CSS Height?

Properti CSS height adalah properti yang digunakan untuk mengatur ukuran tinggi (vertikal) di suatu elemen html. Menggunakan property CSS height maka dapat menentukan seberapa besar ukuran tinggi secara vertikal di suatu elemen baik secara tetap atau responsif tergantung dengan satuan ukuran yang digunakan.

Contoh kode penulisan properti css height:

.box {
  height: 200px;
}

Dari contoh kode di atas, artinya elemen yang memiliki class box akan memiliki ukuran tinggi tetap yaitu 200px.

Fungsi Utama CSS height

• Digunakan untuk mengubah ukuran elemen seperti div, img, p, dan tag html lainnya.
• Dapat membantu mengubah ukuran dan tata letak (layout) agar lebih terstruktur.
• Dapat digunakan secara responsif saat memakai satuan relatif seperti % atau vh.

Nilai-Nilai Umum untuk CSS height

Berikut nilai umum yang sering digunakan untuk properti CSS Height

Properti tambahan CSS max-height

Properti CSS Height memiliki fitur untuk memberikan batas maksimal ukurannya, biasanya digunakan agar responsif di semua perangkat dan tidak lebih besar dari ukuran layar.

Contoh kode penulisan properti css max-height:

.box {
  max-height: 300px;
}

Dari contoh kode di atas artinya elemen yang memiliki class box akan memiliki ukuran tinggi maksimal yaitu 200px.

Apa Itu CSS Width?

Properti CSS width adalah properti yang digunakan untuk mengatur ukuran lebar (horizontal) di suatu elemen html. Menggunakan property CSS width maka dapat menentukan seberapa besar ukuran lebar secara horizontal di suatu elemen baik secara tetap atau responsif tergantung dengan satuan ukuran yang digunakan.

Contoh kode penulisan properti css width:

.box {
  width: 200px;
}

dari contoh kode di atas artinya elemen yang memiliki class box akan memiliki ukuran lebar tetap yaitu 200px.

Fungsi Utama css width

• Digunakan untuk mengubah ukuran elemen seperti div, img, p, dan tag html lainnya.
• Dapat membantu mengubah ukuran dan tata letak (layout) agar lebih terstruktur.
• Dapat digunakan secara responsif saat memakai satuan relatif seperti % atau vw.

Nilai-Nilai Umum untuk CSS width

Berikut nilai umum yang sering digunakan untuk properti CSS width

Properti tambahan CSS max-width

Properti CSS Width memiliki fitur untuk memberikan batas maksimal ukurannya, biasanya digunakan agar responsif di semua perangkat dan tidak lebih besar dari ukuran layar.

Contoh kode penulisan properti css max-width

.box {
  max-width: 300px;
}

dari contoh kode di atas artinya elemen yang memiliki class box akan memiliki ukuran lebar maksimal yaitu 300px.

Contoh Implementasi dan penggunaan

Tidak jauh berbeda dengan script CSS mengenai box model seperti panduan sebelumnya, berikut adalah contoh script lengkap penggunaan CSS width dan height yang telah diterapkan ke kode html.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Height dan Width</title>
    <style>
    .container {
        display: flex;
        justify-content: center;
    }
    .container div {
        margin: 10px;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #dadada;
        border-radius: 10px;
    }
    .container .box-1 {
        width: 100px;
        max-width: 100px;
        height: 100px;
        max-height: 100px;
    }
    .container .box-2 {
        width: 100px;
        max-width: 100px;
        height: 150px;
        max-height: 150px;
    }
    .container .box-3 {
        width: 200px;
        max-width: 200px;
        height: 200px;
        max-height: 200px;
    }
    .container .box-4 {
        width: 200px;
        max-width: 200px;
        height: 350px;
        max-height: 350px;
    }    
    body {
        background-color: aliceblue;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="box-1">Box Satu</div>
        <div class="box-2">Box Dua</div>
        <div class="box-3">Box Tiga</div>
        <div class="box-4">Box Empat</div>
    </div>
</body>
</html>

Jika diakses menggunakan browser akan menampilkan screenshot sebagai berikut :

Jika di inspect element, maka detail mengenai penggunaan properti css height dan width akan terlihat di beberapa elemen yang menggunakannya.

Kesimpulan

Properti CSS height dan width digunakan untuk mengatur ukuran tinggi secara vertikal dan lebar secara horizontal sebuah elemen HTML. Dengan property ini, tampilan elemen atau konten dapat disusun lebih rapi dan responsif sesuai dengan desain dan kebutuhan website di setiap perangkat.

Dengan properti CSS height dan width kita dapat mengelola tampilan dan konten elemen secara tetap atau responsif dan dapat digabungkan dengan metode lain seperti penggunaan css model, properti display, dan fitur tampilan modern lain seperti grid layout dan flex layout.

Demikian tutorial belajar CSS bagian 19 tentang CSS height dan width.