Barangkali anda yang sudah terbiasadengan kode CSS template blogger untuk border, padding danmargin kurang tertarik dengan postingan ringan ini. Walau demikian, sayabuat postingan Belajar CSS Border Padding dan Margin ini untukmemudahkan saya dalam pengeditan template blog. Teman-teman yang masih rajinmengutak-atik template, bisa juga menjadikan artikel ini sebagai salah satuacuan untuk ketiga istilah CSS tersebut. Saya pernah membuat postingan tentang borderdan background pada template blog. Nah, postingan ini sangat erat kaitannyadengan postingan tersebut. Gambar di samping ini dapat menjelaskan ketigaistilah Border-Padding-Margin secara mudah.
Nah, dari gambar di atas kita dapat menyimpulkan pengertiannya seperti berikutini :
- Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah Border
- Border : merupakan garis tepi dari komponen
- Padding : menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam
Penulisan dan Penggunaan Kode CSS
Padding
Ditulis dengan CSS :
padding:5px 5px 5px 5px; urutan nilai angkaadalah atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
padding-left:5px; untuk pengaturan paddingbagian kiri
padding-right:5px; untuk pengaturan paddingkanan
padding-top:5px; untuk pengaturan paddingatas
padding-bottom:5px; untuk pengaturan paddingbawah
Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan"px" yang bisa anda ganti dengan satuan lain yang masih sesuai.
Border
Ditulis dengan CSS :
border:1px dotted #000000; artinya ukurantebal border, style border dan warna border.
Atau anda bisa menuliskannya seperti ini :
border-width:1px; adalah nilai tebal border
border-style:dotted; adalah jenis border danbisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset danlainya.
Atau anda bisa menuliskannya seperti ini :
Margin
Ditulis dengan CSS :
margin:5px 5px 5px 5px; urutan nilai angkauntuk atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
margin-left:5px; untuk pengaturan marginbagian kiri
margin-right:5px; untuk pengaturan marginbagian kanan
margin-top:5px; untuk pengaturan marginbagian atas
margin-bottom:5px; untuk pengaturan marginbagian bawah
Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan pxyang bisa anda ganti dengan satuan lain yang masih sesuai.
Satuan Dalam CSS
Tadi sudah disinggung sedikit bahwa satuan kode CSS tersebut dapat disesuaikandengan satuan lain. Nah, berikut satuan yang digunakan dalam kode CSS.
1. Statik
in -- satuan inchi
cm -- satuan centimeter
mm -- satuan milimeter
pt -- satuan point (1point = 1/72 inchi)
pc -- satuan pica (1pica = 12 point)
px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
% -- satuan persen
em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Style Border
Di bawah ini adalah model style border yang sering digunakan.
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Penulisan border-padding-margin ini masih bisa dimodifikasi lagi dan penggunaannyapun bisa beragam. Apalagi kalau dipadukan dengan background. Yang pentingadalah, saya dan anda sudah bisa lebih memahami tentang CSSBorder-Padding-Margin. Jika masih bingung pada penggunaannya ketikamengutak-atik template, maka biar gampang perhatikan gambar di atas sana. Oke,semoga bermanfaat. Terima kasih.
