Berlangganan Artikel Via Email

Posting Terbaru

Seputar Margin, Padding, dan Border

|

Seputar Margin, Padding, dan Border -

Mungkin bingung ya. Kok ada 3 bahasan??
Pasti langsung berpikir kalo bahasan ini pasti puanjang deh. Ga kok, cuma dikit doang.

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.

Kalo yang ga ngerti pasti tambah bingung deh bacanya. Karena itu langsung aja menuju kerumahnya Kang Noval. Udah dibahas tuntas kok beserta screenshotnya agar lebih mudah dipahami.

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.

11 komentar:

Post a Comment