CSS Part 10 : CSS Box Model

Assalamu alaikum Wr Wb.

Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS Box Model.

CSS Box Model

Semua elemen HTML dapat dianggap sebagi kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin,m perbatasan, padding, dan konten yang sebenarnya. Gambar di bawah ini mengilustrasikan model kotak:

Penjelasan dari bagian-bagian yang berbeda:

• Konten - Isi kotak, dimana teks dan gambar muncul

• Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan

• Border - Sebuah perbatasan yang terjadi di sekitar padding dan konten.

• Margin  - Menghapus sebuah daerah di luar perbatasan. Margin transparan.

Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.

Contoh

div{
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Lebar dan Tinggi dari Elemen
Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.

Penting: Bila Anda mengatur lebar dan tinggi sifat suatu unsur dengan CSS, Anda hanya mengatur lebar dan tinggi dari area konten. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.

Asumsikan kita ingin gaya <div> elemen untuk memiliki lebar total 350px.
Contoh

div{
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} 

REFERNSI
http://www.w3schools.com/css/css_boxmodel.asp