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

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_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
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-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
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
%

Related Articles: