Pengertian CSS Border Padding dan Margin

Seringkali kita dengar yang namanya CSS Border, padding dan margin. mungkin sebagian teman blogger belum mengerti apa yang dimaksud dengan itu semua, yang bagi mengerti cukup simak jika ada kesalahan tolong comment, maklum saya juga masih belajar. Nah disini saya akan menjelaskan maksud dan kegunaannya. Semoga Article ini bermanfaat bagi teman blogger yang sering utak-atik atau mengedit tamplate.

Pengertian dari CSS Border, padding dan margin itu adalah:

• Border : Merupakan garis tepi dari komponen


• Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah border


• Padding : Menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam

Cara penulisan dan penggunaan kode CSS

• Border di tulis dengan CSS
  
  
  
  border:1px dotted #000000; : artinya ukuran tebal border, style border dan warna border
  
  atau anda bisa menuliskannya seperti ini:
  
  border-width:1px; : adalah nilai tebal border
  
  border-style:dotted; : adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainnya
  
  atau anda bisa menuliskannya seperti ini:
  
  border-color:#FFFFFF; : adalah warna border dan anda bisa mengganti warnanya
  
  


• Margin di tulis dengan CSS
  
  
  
  margin:5px 5px 5px 5px; : urutan nilai angka untuk atas, kanan, bawah dan kiri
  
  atau anda bisa menuliskannya seperti ini:
  
  margin-left:5px; : untuk pengaturan margin bagian kiri
  
  margin-right:5px; : untuk pengaturan margin bagian kanan
  
  margin-top:5px; : untuk pengaturan margian bagian atas
  
  margin-bottom:5px; : untuk pengaturan margin bagian bawah
  
  
  
  Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.
  
  


• Padding ditulis dengan CSS
  
  
  
  padding:5x 5px 5px 5px; : urutan nilai angka atas, kanan, bawah dan kiri
  
  atau anda bisa menuliskannya seperti ini:
  
  padding-left:5px; : untuk pengaturan padding bagian kiri
  
  padding-right:5px; : untuk pengaturan padding kanan
  
  padding-top:5px; : untuk pengaturan padding atas
  
  padding-bottom:5px; : untuk pengaturan padding bawah
  
  
  
  pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

Satuan dalam CSS

1. Statik
   
   
   
   in = satuan inchi
   
   cm = satuan centimeter
   
   mm = satuan milimeter
   
   pt = satuan point (1 point = 1/72 inchi)
   
   pc = satuan pica (1 pica = 12 point)
   
   px = satuan pixel (satu titik gambar terkecil dalam layar monitor)
   
   


2. Relatif
   
   
   
   % = 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)

Selamat mencoba............

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------