Teknologi: Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:

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 %