Halo koders, selamat datang kembali. Setelah mimin membahas tentang letak penulisan CSS secara panjang lebar sekarang mimin akan terjun kembali ke tutorial property CSS kita yang selanjutnya. Untuk tema sekarang mimin akan membahas tentang height, min-height, dan max-height.
Height#
height merupakan property yang berfungsi untuk mengatur ketinggian dari suatu element. Umumnya, property inilah yang paling sering digunakan dalam mengatur ketinggian.
button{
height: 20px;
}
min-height#
Jika sobat ingin set tinggi minimal dari suatu element HTML, maka kita bisa menggunakan property min-height.
button{
min-height: 20px;
}
ada beberapa hal yang perlu dipahami:
- Jika content lebih kecil dari min-height, maka property min-height akan bekerja;
- Jika content lebih besar dari min-height, maka property min-height akan diabaikan.
max-height#
Berlawanan dengan min-height, jika sobat ingin tinggi suatu element HTML tidak melebihi batas yang di tentukan, maka sobat bisa menggunakan max-height.
button{
max-height: 20px;
}
Dalam penggunaannya pun ada beberapa hal yang perlu dipahami:
- Jika content lebih kecil dari max-height, maka property max-height tidak akan bekerja;
- Jika content lebih besar dari max-height, maka property max-height akan bekerja;
- Jika sobat menggunakan max-height, maka property height akan diabaikan;
- Cara kerja max-height bisa tergantung pada property overflow yang akan kita bahas nanti.
Let’s Code#
Kita sudah mengerti bagaimana cara menggunakan height, sekarang kita bisa menerapkannya pada button kita yang sebelumnya.
CSS:
<style>
button{
height: 60px;
color: white;
background-color: #8A2BE2;
}
</style>
HTML:
<button>Click Me!</button>
Hasilnya akan terlihat seperti berikut:
Okay, sejauh ini kita sudah belajar bagaimana menambahkan tinggi dari suatu element, selanjutnya kita akan belajar bagaimana cara menambahkan lebar dari suatu element jadi tetap ikuti tutorial ini.
