Apa Itu Border, Padding, Dan Margin Pada CSS?

Widgets

 
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....