Setelah selesai belajar dasar-dasar css beserta stylenya, sekarang kita mulai memasuki materi yang lebih advance lagi. Yang akan kita bahas kali ini adalah box css. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah “model kotak / box” digunakan ketika berbicara tentang design dan tata letak.
Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat. Agar lebih mudah memahami, berikut ini saya akan tampilkan ilustrasi box model :
Box Model CSS
Penjelasan :
- Margin : memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
- Border – sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
- Padding – memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
- Content – adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya
Penting untuk diingat, jika anda mengatur lebar dan tinggi menggunakan CSS, anda hanya mengatur lebar dan tinggi dalam content area. Untuk menghitung semua elemen, anda harus menambahkan padding, border dan margin.
1
2
3
4
5
6
7
| width:250px;padding:10px;border:5px solid gray;margin:10px; |
Pada contoh kode diatas lebarnya bukanlah 250px, melainkan 300px. Hmm..kenapa bisa begitu? Sekarang marilah kita berhitung :
1
| Lebar : 250px, batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px) = 300px. |
Contoh di atas sebenarnya tidak bisa ditampilkan dengan benar apabila menggunakan browser IE. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tahu untuk menyelesaikan masalah ini. Untuk memperbaiki masalah ini, tambahkan saja DOCTYPE ke halaman HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head> |
Baiklah, selesai sudah belajar css tentang box model. Materi selanjutnya kita akan mengenal lebih jauh lagi tentang border. Outline, margin dan padding. Jadi jangan kemana-mana, tetap serius belajar css-nya yaa!
0 comments:
Post a Comment