Tutorial Belajar CSS Part 22 – Mengatur Height dan Width pada CSS

Dalam tutorial ini kita akan membahas mengenai 2 property yaitu height dan width, teman – teman pasti mengetahui fungsi dari height dan width, ya benar height (digunakan untuk mengatur tinggi dari sebuah objek) dan width (digunakan untuk mengatur lebar dari sebuah objek).

 

---

Video Tutorial Belajar CSS – Mengatur Height dan Width pada CSS

 

 

Height dan Width pada CSS

Kedua property ini digunakan untuk mengatur ukuran sebuah objek, ada beberapa satuan yang bisa digunakan untuk mengatur dari property width dan height, antara lain :

1. auto (jika anda menggunakan value auto maka browser akan menghitung berapa ukuran yang digunakan untuk bagian tinggi dan lebar sebuah obyek)
2. satuan px
3. satuan cm
4. satuan percent (%)

untuk konsep satuan pada value css anda bisa pelajari “mengenal satuan  nilai di css ”

Agar lebih memahami silahkan perhatikan skrip dibawah ini :

lalu kita simpan dengan nama semisal height_width.html lalu kita buka di browser :

penjelasannya :

1. terdapat obyek berwarna biru karena kita menggunakan property background-color dengan value blue
2. ukuran obyek tersebut adalah lebarnya 500 pixel dan tingginya 300 pixel
3. ada border berwarna hitam, karena kita menggunakan property border dengan value : solid 1px black, jika anda belum mengenal mengenai property border, silahkan baca tutorial warung belajar mengenai cara mengatur border pada css

 

Set Max-width dan Max-height

Jika pada bagian sebelumnya kita telah membahas mengenai property width dan height, nah pada bagian ini kita akan membahas property yang masih berhubungan dengan propery height dan width

Property Max-width dan Max-height digunakan untuk menset batas maximal dari ukuran sebuah obyek, perhatikan skrip dibawah ini :

semisal kita simpan dengan nama max-width-obyek.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

penjelasan :

1. terlihat ada sebuah obyek dengan ukuran lebar maksimal 500 pixel, sehingga ketika terdapat banyak text obyek otomatis bertambah tingginya, jadi text tidak ditampilkan secara horizontal melainkan vertikal

 

agar anda lebih memahami perhatikan contoh berikutnya ketika kita tidak menggunakan max-width :

semisal kita simpan dengan tanpa_max_width_obyek.html lalu kita buka di browser :

maka terlihat obyeknya akan memanjang secara horizontal, karena kita tidak menset bagian max-width sehingga tidak ada sebuah batasan pada bagian lebar dari obyek.

anda juga bisa mengatur bagian min-height pada obyek, dengan konsep yang sama.

selain max-width dan max-height anda juga bisa mengatur property lain :

1. min-width  : digunakan untuk mengatur minimal lebar dari sebuah obyek
2. min-height : digunakan untuk mengatur minimal tinggi dari sebuah obyek

 

bagaimana teman teman cukup mudah bukan, jadi kesimpulannya adalah kita telah belajar beberapa property seperti width, height, max-width, max-height, min-width, min-height, jika anda yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial selanjutnya.