height
Properti CSS height digunakan untuk mengatur ketinggian kotak konten elemen.
Setiap elemen pada halaman web adalah persegi panjang.
Dan setiap elemen memiliki model kotak persegi panjang yang menggambarkan area yang di hasilkan untuk elemen, yaitu: content box, padding box, border-box, dan margin box.
Content box ada pada setiap elemen. Sedangkan padding, border, dan margin box merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.
Model kotak elemen dalam CSS — termasuk area konten, padding, border, dan margin.
Padding apa pun yang ditambahkan ke elemen akan meningkatkan tinggi total elemen yang dihitung, sehingga elemen tidak
selalu sesuai dengan ketinggian yang diharapkan hanya dengan menggunakan properti height.
Elemen dengan properti height: 300px dan padding: 20px akan merender hingga ketinggian 340px.
Properti height tidak memengaruhi elemen inline yang tidak diganti, seperti span.
Ketinggian konten kotak elemen inline yang tidak diganti adalah dari konten yang dirender di dalamnya.
Untuk mengatur ketinggian pada elemen inline, elemen tersebut harus diubah menjadi block dengan properti display: block atau display: inline-block.
Properti height dapat mengambil nilai panjang atau nilai persentase, selain nilai auto dan inherit.
CSS Syntax
height: auto | length | initial | inherit;
JavaScript Syntax
object.style.height="500px"
| Default value: | auto |
|---|---|
| Inherited: | tidak |
| Animatable: | ya Read about animatable |
| Version: | CSS1 |
Attribute Value
none
height: auto;
height: 100px;
Kamu dapat menggunakan nilai numerik seperti piksel, (r) em, persentase …
Jika konten tidak sesuai dengan ketinggian yang ditentukan, itu akan meluap. Bagaimana wadah akan menangani konten yang
meluap ini ditentukan oleh properti overflow.