Belajar CSS : CSS Height and Width dan CSS Box Model

Hallo teman-teman semua, apa kabar semua ?? Nah pada kesempatan kali ini saya akan memposting materi tentang CSS Height and Width dan CSS Box Model. Berikut materinya
 

CSS HEIGHT AND WIDTH

Mengatur height and width CSS
Properti height dan width digunakan untuk  mengatur tinggi dan lebar pada elemen. Height dan width dapat diatur untuk auto (ini merupakan default, berarti browser menghitung tinggi dan lebar), untuk menentukan panjang bisa menggunakan px, cm, atau dalam persen (%) dari blok yang mengandung.
Berikut  contoh scriptnya :

Hasilnya :

*Catatan : sifat heigth dan width bukanlah termasuk dari bagian padding, perbatasan maupun margin, properti tersebut digunakan untuk mengstur tinggi atau lebar area didalam padding, border dan margin elemen.

Mengatur max-width

Properti max-width digunakan untuk lebar maksimum dari suatu elemen. Untuk menentukan panjang bisa menggunakan px, cm, atau dalam persen (%) dari blok yang mengandung atau diatur none (ini merupakan default, berarti tidak ada lebar maksimum). 

Contoh :

Hasilnya :

CSS BOX MODEL

Box model digunakan ketika berbicara tentang desain dan tata letak. Pada dasarnya  adalah sebuah kotak yang membungkus disekitar setiap elemen, terdiri dari margin, border, padding dan konten yang sebenarnya.

Keterangan :

• Konten, isi kotak dimana dimana teks dan gmabar muncul.
• Padding, menghapus sebuah daerah disekitar konten. Padding transparant
• Border, sebuah perbatasan disekitar pading dan konten.
• Margin, menghapus sebuah daerah luar perbatasan. Margin transparan

Box Model memungkinkan kita untuk menambah perbatasan sekiatr elemen dan menentukan ruang antar unsur-unsur.

Contoh :

Hasil dari script yang diatas

Width and height of an Element
Berikut contoh yng mengatur ebar dan tinggi pada suatu elemen :

Hasilnya :

 Referensi :
http://www.w3schools.com/css/css_boxmodel.asp
http://www.w3schools.com/css/css_dimension.asp 

Sekian dan terimaksih semoga bermanfaat