{"id":58218,"date":"2025-10-09T08:11:00","date_gmt":"2025-10-09T01:11:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=58218"},"modified":"2026-02-16T10:12:42","modified_gmt":"2026-02-16T03:12:42","slug":"belajar-css-bagian-19","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-19\/","title":{"rendered":"Belajar CSS Bagian 19: CSS Height dan Width"},"content":{"rendered":"\n<p>Pada seri Belajar CSS <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-18\" target=\"_blank\" rel=\"noopener\" title=\"\">bagian 18<\/a>, 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 <em>height <\/em>dan <em>width<\/em>, dua properti penting yang berfungsi untuk mengatur ukuran tinggi dan lebar elemen.<\/p>\n\n\n\n<p>Dengan memahami cara kerja <em>height <\/em>dan <em>width<\/em>, 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 <em>layouting <\/em>web design dengan CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kenapa Perlu Belajar CSS Height dan Width?<\/h2>\n\n\n\n<p>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 <em>height <\/em>(tinggi) dan <em>width <\/em>(lebar).<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Memahami cara kerja CSS <em>height <\/em>dan <em>width <\/em>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, <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-12\/\">flex layout<\/a>, dan <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-11\/\">grid layout<\/a>, untuk menciptakan tampilan yang lebih modern dan terstruktur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu CSS Height?<\/h2>\n\n\n\n<p>Properti CSS <em>height <\/em>adalah properti yang digunakan untuk mengatur ukuran tinggi (vertikal) di suatu elemen html. Menggunakan property CSS <em>height <\/em>maka dapat menentukan seberapa besar ukuran tinggi secara vertikal di suatu elemen baik secara tetap atau responsif tergantung dengan <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-8\/\" target=\"_blank\" rel=\"noopener\" title=\"\">satuan ukuran<\/a> yang digunakan.<\/p>\n\n\n\n<p>Contoh kode penulisan properti css <em>height<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n  height: 200px;\n}<\/code><\/pre>\n\n\n\n<p>Dari contoh kode di atas, artinya elemen yang memiliki class box akan memiliki ukuran tinggi tetap yaitu 200px.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fungsi Utama CSS height<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Digunakan untuk  mengubah ukuran elemen seperti div, img, p, dan tag html lainnya.<\/li>\n\n\n\n<li>Dapat membantu mengubah ukuran dan tata letak (<em><a href=\"https:\/\/blog.rumahweb.com\/layout-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"layout adalah\">layout<\/a><\/em>) agar lebih terstruktur.<\/li>\n\n\n\n<li>Dapat digunakan secara responsif saat memakai satuan relatif seperti % atau vh.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Nilai-Nilai Umum untuk CSS height<\/h3>\n\n\n\n<p>Berikut nilai umum yang sering digunakan untuk properti CSS Height<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Nilai<\/strong><\/td><td><strong>Keterangan<\/strong><\/td><\/tr><tr><td>auto<\/td><td>Tinggi mengikuti isi konten (nilai default).<\/td><\/tr><tr><td>px, em<\/td><td>Tinggi tetap (dalam satuan piksel atau relatif terhadap font).<\/td><\/tr><tr><td>%<\/td><td>Tinggi relatif terhadap elemen induknya.<\/td><\/tr><tr><td>vh<\/td><td>Tinggi berdasarkan persentase dari tinggi viewport.<\/td><\/tr><tr><td>min-content,<br \/>max-content<\/td><td>Tinggi menyesuaikan isi minimum\/maksimum.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Properti tambahan CSS max-height<\/h3>\n\n\n\n<p>Properti CSS Height memiliki fitur untuk memberikan batas maksimal ukurannya, biasanya digunakan agar responsif di semua perangkat dan tidak lebih besar dari ukuran layar.<\/p>\n\n\n\n<p>Contoh kode penulisan properti css <em>max-height<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n  max-height: 300px;\n}<\/code><\/pre>\n\n\n\n<p>Dari contoh kode di atas artinya elemen yang memiliki class box akan memiliki ukuran tinggi maksimal yaitu 200px.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu CSS Width?<\/h2>\n\n\n\n<p>Properti CSS <em>width <\/em>adalah properti yang digunakan untuk mengatur ukuran lebar (<em>horizontal<\/em>) di suatu elemen html. Menggunakan property CSS <em>width <\/em>maka dapat menentukan seberapa besar ukuran lebar secara horizontal di suatu elemen baik secara tetap atau responsif tergantung dengan satuan ukuran yang digunakan.<\/p>\n\n\n\n<p>Contoh kode penulisan properti css <em>width<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n  width: 200px;\n}<\/code><\/pre>\n\n\n\n<p>dari contoh kode di atas artinya elemen yang memiliki <em>class box<\/em> akan memiliki ukuran lebar tetap yaitu 200px.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fungsi Utama css width<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Digunakan untuk mengubah ukuran elemen seperti div, img, p, dan tag html lainnya.<\/li>\n\n\n\n<li>Dapat membantu mengubah ukuran dan tata letak (layout) agar lebih terstruktur.<\/li>\n\n\n\n<li>Dapat digunakan secara responsif saat memakai satuan relatif seperti % atau vw.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Nilai-Nilai Umum untuk CSS width<\/h3>\n\n\n\n<p>Berikut nilai umum yang sering digunakan untuk properti CSS width<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Nilai<\/strong><\/td><td><strong>Keterangan<\/strong><\/td><\/tr><tr><td>auto<\/td><td>Lebar ditentukan otomatis oleh browser berdasarkan konten.<\/td><\/tr><tr><td>px, em<\/td><td>Satuan tetap (absolut atau relatif terhadap ukuran font).<\/td><\/tr><tr><td>%<\/td><td>Lebar relatif terhadap elemen induknya.<\/td><\/tr><tr><td>vw<\/td><td>Lebar berdasarkan persentase dari lebar viewport (jendela).<\/td><\/tr><tr><td>min-content,<br \/>max-content<\/td><td>Lebar sesuai isi minimum\/maksimum konten.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Properti tambahan CSS max-width<\/h3>\n\n\n\n<p>Properti CSS Width memiliki fitur untuk memberikan batas maksimal ukurannya, biasanya digunakan agar responsif di semua perangkat dan tidak lebih besar dari ukuran layar.<\/p>\n\n\n\n<p>Contoh kode penulisan properti css max-width<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n  max-width: 300px;\n}<\/code><\/pre>\n\n\n\n<p>dari contoh kode di atas artinya elemen yang memiliki class box akan memiliki ukuran lebar maksimal yaitu 300px.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Implementasi dan penggunaan<\/h2>\n\n\n\n<p>Tidak jauh berbeda dengan <em>script <\/em>CSS mengenai box model seperti panduan sebelumnya, berikut adalah contoh <em>script <\/em>lengkap penggunaan CSS <em>width <\/em>dan <em>height <\/em>yang telah diterapkan ke kode html.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Contoh CSS Height dan Width&lt;\/title&gt;\n    &lt;style&gt;\n    .container {\n        display: flex;\n        justify-content: center;\n    }\n    .container div {\n        margin: 10px;\n        padding: 10px;\n        background-color: #ffffff;\n        border: 1px solid #dadada;\n        border-radius: 10px;\n    }\n    .container .box-1 {\n        width: 100px;\n        max-width: 100px;\n        height: 100px;\n        max-height: 100px;\n    }\n    .container .box-2 {\n        width: 100px;\n        max-width: 100px;\n        height: 150px;\n        max-height: 150px;\n    }\n    .container .box-3 {\n        width: 200px;\n        max-width: 200px;\n        height: 200px;\n        max-height: 200px;\n    }\n    .container .box-4 {\n        width: 200px;\n        max-width: 200px;\n        height: 350px;\n        max-height: 350px;\n    }    \n    body {\n        background-color: aliceblue;\n    }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"box-1\"&gt;Box Satu&lt;\/div&gt;\n        &lt;div class=\"box-2\"&gt;Box Dua&lt;\/div&gt;\n        &lt;div class=\"box-3\"&gt;Box Tiga&lt;\/div&gt;\n        &lt;div class=\"box-4\"&gt;Box Empat&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Jika diakses menggunakan <em>browser <\/em>akan menampilkan <em>screenshot <\/em>sebagai berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-1024x487.png\" alt=\"Belajar CSS Height dan Width\" class=\"wp-image-58219\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-1024x487.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-300x143.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-768x365.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-1536x730.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-370x176.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-270x128.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-570x271.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24-740x352.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/10\/image-24.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Jika di inspect element, maka detail mengenai penggunaan properti css <em>height <\/em>dan <em>width <\/em>akan terlihat di beberapa elemen yang menggunakannya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Properti CSS <em>height <\/em>dan <em>width<\/em> 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.<\/p>\n\n\n\n<p>Dengan properti CSS <em>height <\/em>dan <em>width <\/em>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.<\/p>\n\n\n\n<p>Demikian tutorial belajar CSS bagian 19 tentang CSS <em>height <\/em>dan <em>width<\/em>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":58270,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-58218","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/58218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=58218"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/58218\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/58270"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=58218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=58218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=58218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}