Close it

Rabu, 15 Juni 2011

15 Pengertian Padding, Border, Margin (CSS)►► URL : http://wwdq.blogspot.com/2011/06/pengertian-padding-border-margin-css.html.

Share
Hallo sobat blogger yang master maupun newbie, sobat blogger pasti sudah pernah main main di CSS,  kalau belum tahu , silakan menuju ke Rancangan --> Edit HTML, Lalu cari (CTRL+F) "]]></b:skin>" liat bagian atasnya, lalu nikmati CSS yang terdapat di blog anda. Bagi yang sering melihat CSS, pasti sudah tidak asing lagi dengan yang namanya margin, border, padding. Tapi apakah anda tahu fungsinya? Maka dari itu WWDQ kembali memberikan pengertian tentang ketiga pengukuran dasar pada CSS tersebut.

Untuk permulaan silakan lihat terlebih dahulu gambar dibawah ini :
Apakah anda mulai mempunyai gambaran tentang pembahasan kali ini?


Berikut penjelasannya :
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
     Mulai mengerti? ayo lihat lebih jelas cara penggunaannya.


Cara Penggunaan


Padding

Ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan


padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas
padding-bottom:5px; untuk bagian bawah

Border

Ditulis dengan CSS border:3px solid #666666; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan


border-width:1px; ini adalah ketebalan border
border-style:solid; ini adalah jenis bordernya bisa kamu ganti dengan dashed, dotted, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border


Margin

Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas


margin-left:5px; ini adalah untuk pengaturan padding bagian kiri
margin-right:5px; ini adalah untuk pengaturan padding kanan
margin-top:5px; untuk bagian atas
margin-bottom:5px; untuk bagian bawah
Satuan Dalam CSS


1. Statik
  • 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)
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)
Contoh Tampilan Style Border :


dotted


dashed


solid


double


groove


ridge


inset


outset


Semoga artikel ini membantu anda :)

referensi artikel : http://nsxcrew../padding...
Post Info :
Judul = Pengertian Padding, Border, Margin (CSS)

Url = http://wwdq.blogspot.com/2011/06/pengertian-padding-border-margin-css.html

Author = Rizal Loa Wanda. At : 22.34 Rabu, 15 Juni 2011 | Comment:15

Artikel Terkait

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

15 komentar:

  1. sangat lengkap sob :D terimakasih aku mulai mengerti., hhe

    BalasHapus
  2. hohoho.... iya... ane juga udah lumayan ngarti jadinya :)

    BalasHapus
  3. terima kasih gan... skr mulai mengerti .. :D

    BalasHapus
  4. sama-sama gan :) makasih kunjungan dan komentarnya

    BalasHapus
  5. Makasih mas Sandi atas kunjungannya :)

    BalasHapus
  6. Sangat jelas! Matur nuwun sanget...

    BalasHapus
  7. kang postnya sip bgt, yang bahas tentang tag float ada ga kang??

    BalasHapus
  8. Sip bos sangat membantu sekali.. bos ada domain (dot)com gratisan nih.. gak mau nyoba ? kunjung balik ya

    BalasHapus
  9. @semuanya : terimakasih atas kunjungannya gan :)
    kalau untuk apdetan terbaru, tunggu aja yah gan kalau ane udah ga sibuk didunia real :) begitu juga dengan kunjungan baliknya :) sekali lagi terimakasih gan :)

    BalasHapus
  10. sangat bermanfaat, bila teman-teman mau silahkan kunjungi blog saya ==>>> investasi saham

    BalasHapus
  11. @Heri Setiabudi Terimakasih mas atas komentar dan kunjungannnya :)

    BalasHapus
  12. tfs sob..
    ini yang sedang ane cari..
    lagi kebingungan mau nggeser2 posisi widget utk template baru ...

    BalasHapus

No Spam Please :)


Tambahkan Bookmark halaman ini untuk mempermudah Pencarian Anda [CTRL+D].