Tutorial Belajar CSS: Cara Mengatur Tinggi Element HTML (height)

Posted on

Setelah membahas property width yang digunakan untuk mengatur lebar element HTML, kali ini kita akan membahas property height CSS untuk mengatur tinggi dari sebuah element HTML.


Cara Mengatur Tinggi Element HTML dengan CSS

Cara pemakaian property height benar-benar mirip dengan property width, dimana kita tinggal memberikan nilai satuan panjang seperti pixel, persen, dll.

Selaku contoh, untuk mengatur tinggi sebuah tag <div> sebesar 50 pixel, saya dapat menulis selaku berikut:

Berikut contoh penggunaannya:

Di contoh diatas, saya membangun 4 tag <div> dengan bermacam nilai height. Seperti yang terlihat, masing-masing ‘kotak’ akan mempunyai tinggi yang berbeda-beda.

Apabila dikombinasikan dengan property width, kita dapat mengatur tinggi dan lebar dari setiap element HTML, seperti contoh berikut:

Kini ini setiap kotak mempunyai tinggi dan lebar yang berbeda-beda.

Lebih jauh lagi,  property width dan height pun dapat digunakan untuk mengatur lebar dan tinggi setiap element di HTML, seperti gambar. Berikut contohnya:

Di contoh kode HTML dan CSS diatas, saya menampilkan 4 gambar yang sama. Hanya saja ukuran dari tiap gambar diatur menggunakan property width dan height dari CSS.

Property width dan height digunakan untuk menentukan berapa ukuran ‘konten’ dari sebuah element. Lebar total dari setiap element HTML tak hanya dari kedua property ini, tapi pun property lainnya yang termasuk kedalam CSS Box Model, yakni padding, border dan margin.

Di panduan berikutnya akan dibahas mengenai cara membuat garis tepi element menggunakan property border.


eBook CSS Uncover Duniailkom

Apabila rekan-rekan ingin belajar cara mendesain web, CSS wajib dikuasai. Dun
iailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/