Pengertian Padding, Border, Margin

| Kamis, 10 Maret 2016
Assalamualaikum Wr.Wb



Haii apakabar , ketemu lagi dengan saya, hehehe :)

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 :)
Wassalamualikum Wr.Wb.
edit

Tidak ada komentar:

Posting Komentar

Posting Lebih Baru Posting Lama
Diberdayakan oleh Blogger.
© Design 1/2 a px. · 2015 · Pattern Template by Simzu · © Content pujilestari