Apa itu Padding, Margin dan Border ...?

Postingan kali ini saya buat karena alasan sifat manusia yang kadang lupa, begitupun dengan saya, kadang saya lupa apa itu padding, margin. bahkan suka ketukar. Intinya postingan ini cuma buat mengingatkan saja (takutnya lupa terus)...

Sebenarnya istilah padding, margin dan border ini adalah bagian dari kode CSS yang sering kita lihat di kode template blogger kita. perhatikan gambar berikut :

Padding: Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border


1. Padding

Coba kalian lihat kode template kalian pada bagian Css, pasti terdapat kode berikut :

padding:5px 5px 5px 5px;

Nah.. itulah padding, jika kita terjemahkan, kode diatas berarti padding dengan posisi ATAS 5px KANAN 5px BAWAH 5px KIRI 5px. Jadi sekarang kita tahu urutan angka-angka tersebut yaitu : ATAS,KANAN,BAWAH,KIRI.
Tapi ada sebagian kode yang menuliskan langsung dengan posisinya, contohnya seperti berikut :

Jika hanya padding atas ---> padding-top:5px
Jika hanya padding kanan ---> padding-right:5px
Jika hanya padding Bawah ---> padding-bottom:5px
Jika hanya padding Kiri ---> padding-left:5px

jadi terserah enaknya kalian mau memakai kode yang mana.

2. Margin

Untuk margin kodenya seperti ini :

margin:5px 5px 5px 5px;

sama dengan padding urutannya adalah ATAS,KANAN,BAWAH,KIRI. Untuk menuliskanya margin juga hampir sama dengan padding, bisa ditulis menurut posisinya.

Jika hanya margin atas ---> margin-top:5px
Jika hanya margin kanan ---> margin-right:5px
Jika hanya margin Bawah ---> margin-bottom:5px
Jika hanya margin Kiri ---> margin-left:5px

3. Border

Untuk border biasanya urutannya seperti ini : Ukuran border, Jenis border, dan warna border. Contoh : border:1px dotted #000000;

1px --> tebalnya garis 1 pixel
dotted --> Jenis garis adalah dotted (putus-putus/titik-titik)
#000000 --> Warna garis (Hitam)

sama juga dengan padding dan margin, borderpun bisa ditulis berdasarkan posisi :

Jika hanya border atas ---> border-top:5px
Jika hanya border kanan ---> border-right:5px
Jika hanya border Bawah ---> border-bottom:5px
Jika hanya border Kiri ---> border-left:5px

Oia untuk melihat jenis border telah saya jelaskan diartikel saya sebelumnya, KLIK disini untuk melihat jenis border.

Tambahan :
Dari semua kode diatas terdapat kode "px" yang berarti adalah pixel. dalam Css satuan yang biasa ditulis sebagai berikut :

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)
% --> 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)

Semoga bisa bermanfaat buat saya sendiri dan buat kalian. Terima kasih