Belajar CSS Part 7 - Height dan Width (Pengaturan Tinggi dan Lebar Elemen)

Assalamu'alaikum warohmatullaahi wabarokaatuh

Kali ini kita akan mempelajari tentang pengaturan tinggi dan lebar dari sebuah elemen dengan menggunakan properti height dan width. Untuk lebih jelasnya mari kita langsung praktikkan.

A. MENGATUR HEIGHT DAN WIDTH.

• Height merupakan properti yang digunakan untuk menentukan tinggi suatu elemen
• Width merupakan properti yang digunakan untuk menentukan lebar dari sebuah elemen.

Contoh script:. 

img {
height : 200px;
width : 100px;
}

Penjelasan :

Script di atas akan mengatur elemen gambar sehingga memiliki tinggi 200 pixel dan lebar 100 pixel

Coba sendiri di sini

B. MENGATUR MAX-WIDTH

Kita juga bisa menggunakan properti max-width untuk pengaturan lebar sebuah elemen. Max-width merupakan properti untuk mengatur lebar maksimal dari sebuah elemen. Perbedaannya dengan width, max-width memiliki fungsi lebih fleksibel. Elemen yang kita gunakan (misalnya gambar) akan secara otomatis menyesuaikan dengan lebar aslinya selama belum menyentuh batas max-width.

Contoh :

div {
height : 200px;
max-width : 100px;
}

Dengan script  di atas, sebuah elemen div akan memiliki tinggi tetap, yaitu 200 pixel. Namun lebar dari elemen tersebut akan menyesuaikan dengan lebar browser dengan catatan tidak melebihi dari 100 pixel.

Coba sendiri di sini


Demikian Belajar CSS tentang Pengaturan Tinggi dan Lebar (Height dan Width), semoga bermanfaat. Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.