Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. 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.
Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model
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
Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px
1
2
3
4
5
6
7
| div.column { width:300px; height:200px; margin:10px; border:5px solid #000; padding:10px;} |
berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel
- Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)
- Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)
- Total lebar 350px dan tinggi 250px
Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini
i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<html><head><title></title><style type="text/css">div.column { width:300px; height:200px; margin:10px; border:5px solid #000; padding:10px;}</style></head><body><div class="column"> Test </div></body></html> |
Penggunaan Border
Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.
Cara menuliskan border adalah sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| div.column { width:200px; height:20px; border-width:5px; border-color:#39F; border-style:solid;}/* CSS border diatas bisa juga dituliskan seperti ini*/div.column { width:200px; height:20px; border:5px #39F solid;} |
Hasilnya dari penerapan border diatas :
Sample
Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah
| Property | Keterangan | Nilai |
|---|---|---|
| border | Menentukan semua gaya border dalam satu deklarasi | border-width border-style border-color |
| border-bottom | menentukan semua gaya border bawah dalam satu deklarasi | border-bottom-width border-bottom-style border-bottom-color |
| border-bottom-color | menentukan warna border bawah | border-color |
| border-bottom-style | menentukan gaya border bawah | border-style |
| border-bottom-width | menentukan lebar border bawah | border-width |
| border-color | menentukan warna kolom border | color_name hex_number rgb_numbertransparent inherit |
| border-left | menentukan semua gaya border kiri dalam satu deklarasi | border-left-width border-left-style border-left-color |
| border-left-color | menentukan warna border kiri | border-color |
| border-left-style | menentukan gaya border kiri | border-style |
| border-left-width | menentukan lebar border kiri | border-width |
| border-right | menentukan semua gaya border kanan dalam satu deklarasi | border-right-width border-right-style border-right-color |
| border-right-color | menentukan warna border kanan | border-color |
| border-right-style | menentukan gaya border kanan | border-style |
| border-right-width | menentukan lebar border kanan | border-width |
| border-style | menentukan gaya dari keseluruhan kolom border | none hidden dotted dashed solid double groove ridge inset outset inherit |
| border-top | menentukan semua gaya border atas dalam satu deklarasi | border-top-width border-top-style border-top-color |
| border-top-color | menentukan warna border kanan | border-color |
| border-top-style | menentukan gaya border kanan | border-style |
| border-top-width | menentukan lebar border kanan | border-width |
| border-width | menentukan lebar dari keseluruhan kolom border | thin medium thick lengthinherit |
Penggunaan Outline
Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah
| Keterangan | Nilai | |
|---|---|---|
| outline | Menentukan semua opsi outline dalam satu deklarasi | outline-color outline-style outline-widthinherit |
| outline-color | menentukan warna outline | color_name hex_number rgb_numberinvert inherit |
| outline-style | menentukan gaya outline | none dotted dashed solid double groove ridge inset outset inherit |
| outline-width | menentukan lebar outline | thin medium thick lengthinherit |
Penggunaan Margin
Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.
| Keterangan | Nilai | |
|---|---|---|
| margin | digunakan untuk memnentukan jarak margin pada satu deklarasi | margin-top margin-right margin-bottom margin-left |
| margin-bottom | menentukan jarak margin bawah | auto length % |
| margin-left | menentukan jarak margin kiri | auto length % |
| margin-right | menentukan jarak margin kanan | auto length % |
| margin-top | menentukan jarak margin atas | auto length % |
Penggunaan Padding
memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:
1
2
3
4
5
6
| div.column { width:200px; height:20px; padding 20px; border:5px #39F solid;} |
Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:
Sample
Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah
| Property | Description | Values |
|---|---|---|
| padding | Menentukan keseluruhan opsi padding dalam satu deklarasi | padding-top padding-right padding-bottom padding-left |
| padding-bottom | menentukan lapisan padding bawah | length % |
| padding-left | menentukan lapisan padding kiri | length % |
| padding-right | menentukan lapisan padding kanan | length % |
| padding-top | menentukan lapisan padding atas | length % |