Tentang Margin, Padding, dan Border

Nah disini saya ingin menjelakan sedikit script-script yang ada di HTML yaitu Margin dan Padding merupakan 2 jenis HTML dengan tujuan yang sama tetapi berlawanan arah. Keduanya digunakan untuk menentukan jarak pada tiap elemen template. Dibilang berlawanan karena Margin menentukan jarak bagian luar dan padding pada bagian dalam.

Untuk border atau garis kotak biasanya sering dipakai untuk template jenis klasik(seperti blog saya ini). Karena template jenis ini jarang menggunakan image/gambar sebagai pemanis tampilan blog. Template jenis klasik menggunakan permainan warna dan bordernya untuk mempercantik tampilan blog. Kelebihan dari template jenis ini adalah page loadnya lebih cepat.

Contoh kode HTML border :

"border:1px solid #000000;" (garis semua sisi/kotak)
"border-top:1px solid #000000;" (garis atas)
"border-bottom:1px solid #000000;" (garis bawah)
"border-left:1px solid #000000;" (garis kiri)
"border-right:1px solid #000000;" (garis kanan)


Keterangan :
1px : ukuran tebal garis
solid : jenis garis
#000000 : warna garis

Berikut modifikasi2 HTML pada border yang bisa dilakukan

♦ Ukuran garis bisa dicoba2 sendiri : 1px, 2px, 3px,...dst

♦ Jenis garis antara lain :
solid, dotted, dashed, double, groove, ridge, inset, dan outset

♦ Warna garis bisa diubah sesuai keinginan.

♦ Untuk membuat lengkungan pada tiap siku tambahkan kode berikut :
-moz-border-radius:10px;

atau

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

contoh :
border:1px solid #000000;
-moz-border-radius:10px;

ukuran banyaknya lengkungan sesuai keinginan.

Silahkan dicoba sendiri untuk melihat perubahannya. Selalu gunakan browser firefox untuk tampilan terbaik.

Artikel Terkait: