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
<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_number transparent 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 length inherit |
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-width inherit |
|
outline-color
|
menentukan warna outline
|
color_name
hex_number rgb_number invert inherit |
|
outline-style
|
menentukan gaya outline
|
none
dotted dashed solid double groove ridge inset outset inherit |
|
outline-width
|
menentukan lebar outline
|
thin
medium thick length inherit |
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
% |
Baca-baca saja gak ada gunanya kalo
gak di coba :)
0 komentar:
Posting Komentar