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

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 penggunaan property height sangat mirip dengan property width, dimana kita tinggal memberikan nilai satuan panjang seperti pixel, persen, dll.

Sebagai contoh, untuk mengatur tinggi sebuah tag

sebesar 50 pixel, saya bisa menulis sebagai berikut:

Berikut contoh penggunaannya:

Dalam contoh diatas, saya membuat 4 tag

dengan berbagai nilai height. Seperti yang terlihat, masing-masing ‘kotak’ akan memiliki tinggi yang berbeda-beda.

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

Sekarang setiap kotak memiliki tinggi dan lebar yang berbeda-beda.

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

Dalam 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 tidak hanya dari kedua property ini, tapi juga property lainnya yang termasuk kedalam CSS Box Model, yakni padding, border dan margin.

Dalam tutorial selanjutnya akan dibahas tentang cara membuat garis tepi element menggunakan property border.

---

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Sumber wk.com

blogger

Next Post

Previous Post