Apa Itu Border, Padding, Dan Margin Pada CSS?

Widgets

PopAds.net - The Best Popunder Adnetwork
 
Sebelum kita memulai mengatur letak halaman kita, perlu kiranya diperhatikan posisi padding maupun margin dari tiap halaman blog kita, semakin rapi letaknya, maka akan semakin menarik blog kita... Untuk lebih jelas tentang apa itu border, padding maupun margin, kamu dapat melihat ilustrasi berikut..




Dari ilustrasi di atas, dapat terlihat bagian-bagian yang ada pada masing-masing halaman blog kamu..
  • Content dapat berupa bagian isi dari halaman kamu;
  • Padding merupakan jarak yang memisahkan bagian isi dengan border atau bagian isi tanpa border dengan margin-nya.
  • Border merupakan garis pinggir yang sering digunakan untuk membingkai bagian isi tersebut;
  • Margin merupakan bagian terluar atau yang memisahkan padding dengan halaman.
Ada beberapa satuan yang sering saya gunakan digunakan pada CSS seperti :
  • pt : point (1 pt = 1/72 inch)

  • px : pixel (merupakan ukuran terkecil pada monitor)

  • % : persen (dalam bentuk persentase)

  • em : atau ems (merupakan ukuran font pada elemen)


Ada juga sih satuan lain seperti in (inchi), cm, mm, pc, ex, tapi ukuran tersebut jarang saya gunakan sebab semakin banyak satuan ukuran yang digunakan akan semakin pusing kita mengatur halaman kita... hehehe..

Dalam mengatur/meng-edit padding, border, dan margin-nya, kita dapat menggunakan satuannya tersebut seperti berikut ni contohnya....

padding: 5px 0px 5px 0px;

Pada pengaturan di atas, urutan angkanya dimulai dari atas, kanan, bawah dan kiri. Atau jika pusing dalam menggunakannya, kamu cukup menggunakan padding-(top/right/left/bottom)..
contohnya,,

padding-top: 5px (ini berarti jarak antara bagian isi dengan marginnya sebesar 5 pixel)..

Aturan di atas dapat juga kamu gunakan pada border ataupun margin, namun khusus pada bagian border, aturan seperti itu jarang saya gunakan sebab pasti lucu kalo bingkainya besar kecil sebelah.. hwahwa ...

Untuk bagian border, biasanya digunakan aturan seperti ini contohnya...

border: 2px solid #362df4;
Artinya kayak gini nich : "hai border, aku pengen kamu berukuran 2 pixel, bentuknya solid/ga putus-putus dan warnanya biru(#362df4)...
hasilnya jadi seperti ini...


Isi content kamu


Selain bentuk solid, kamu juga bisa menggunakan kata dotted, dashed, groove, ridge, inset, outset, dll... (jadi inget waktu bikin friendster nich...!!! )

Pengen tau bentuk lainnya seperti apa?? praktekin langsung dunkz biar ngerti n paham.... Selamat berkreasi ya....



lazadda

8 comments: Post Yours!Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Wah thanks gan info nya :)

    ReplyDelete
  2. wah mantap banget :D

    ReplyDelete
  3. sedang memperdalam ilmu soal script.... nice postingan

    ReplyDelete
  4. Anonymous3:35 AM

    Thanks mastah :D

    ReplyDelete
  5. agak bingung,, tapi saya mau coba.

    ReplyDelete
  6. kadang suka bingung antara padding sama margin waktu nulis kode css.

    ReplyDelete
  7. aduh ... mau buat menu dan sub menu gan?

    butuh pencerahan nieh

    ReplyDelete
  8. Anonymous9:57 PM

    Makasi gan.. nambah ilmu nih..

    ReplyDelete

Tukeran link


Vinspirations



DMCA.com
 

Info Blog

Recent Comments

Label

Copyright 2009  ©  Vinspirations | powered by Blogger

Template by vinspirations | Best View on Firefox