Pengertian Padding, Border, dan Margin

 

 Hari ini saya sedang belajar tentang pengertian Padding, Border, dan Margin. Ok, berikut ini adalah pengertian dari masing-masing komponen :

• Padding : Digunakan untuk menentukan jarak komponen Body ke bagian Border atau ukuran jarak bagian dalam.
• Border : Garis tepi dari sebuah komponen (Content).
• Margin : Ukuran jarak bagian luar atau jarak setelah Border

Cara penggunaan :

• Padding

Penulisan CSS untuk Padding adalah padding: 5px 5px 5px 5px; Urutan penggunaan ukurannya adalah mulai dari yang paling depan yaitu, atas kanan bawah, kiri. Atau jika Anda ingin memecahkannya menjadi bagian yang lebih spesifik yaitu :

• padding-top: 5px; ~ Digunakan untuk padding bagian atas.
• padding-right: 5px; ~ Digunakan untuk padding bagian kanan.
• padding -bottom: 5px; ~ Digunakan untuk padding bagian  bawah.
• padding-left: 5px; ~ Digunakan untuk padding bagian kiri.

• Border

Penulisan CSS untuk Border adalah border: 3px solid #666666. Dari 3 komponen Border tersebut. Berikut penjelasannya :

• border: 3px ~ Merupakan ukuran ketebalan dari Border tersebut (border-width).
• solid ~ Merupakan jenis Style dari border tersebut (border-style).
• #666666 ~ Merupakan warna dari Border tersebut (border-color).

• Margin

Penulisan CSS untuk Margin adalah margin: 5px 5px 5px 5px; urutan penggunaan ukurannya dalah mulai dari yang paling depan yaitu, atas, kanan bawah, kiri. Atau jika Anda ingin memecahnya menjadi bagian yang lebih spesifik yaitu :

• margin-top: 5px; ~ Digunakan untuk Margin bagian atas.
• margin-right: 5px; Digunakan untuk Margin bagian kanan.
• margin-bottom: 5px; ~ Digunakan untuk Margin bagian bawah.
• margin-left: 5px; ~ Digunakan untuk Margin bagian kiri.

Macam-macam Satuan Dalam CSS.

Satuan dalam CSS dikelompokkan menjadi 2 bagian yaitu :

1. Statik
2. Relatif

Penjelasannya setiap kelompoknya :

Relatif

• in ~ Satuan Inchi
• cm ~ Satuan Centimeter
• mm ~ Satuan Milimeter
• pt ~ Satuan Point (1 point = 1/72 Inchi)
• pc ~ Satu pica (1 pica = 12 point)
• px ~ Satuan pixel (titik terkecil dalam visual PC)

Statik

• % ~ Satuan Persen
• em ~ Satuan em / ems (1em = Ukuran font yang tengah dalam elemen)
• ex ~ Satuan X-Height suatu font (X-Height biasanya setengah dari ukuran dasar font)

Contoh dari Style Border :

 Sekian dari saya semoga bermanfaat untuk Anda :)

Terima Kasih :)