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 :
Penjelasan :
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:
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!
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
1
2
3
4
5
6
7
| width:250px;padding:10px;border:5px solid gray;margin:10px; |
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
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. |
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> |
0 komentar:
Posting Komentar