Padding, Margin Dan Border Pada CSS

Posted By anasku
Sering kali kita mendengar kata-kata Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini Anas akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu



Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah

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

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 dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas


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)
Style Border


Dotted


dashed


solid


double


groove


ridge


inset


outset


Sekian Dulu dasar CSS yang lainya akan menyusul
Sekian semoga bermanfaat
Artikel Terkait untuk "Padding, Margin Dan Border Pada CSS"


24 comments:

Syahrizki Rafi' Asy'ari said...

hahahahaha....akhirnya bisa jadi pertamaaaaaaaaaaaxxxxx, komentarnya entar aja dulu yah.....

subagya said...

yups ini salah satunya saya mau belajar... btw thank infonya....

subagya said...

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Padding : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Maaf mas apa ga salah ketik ...untuk definisi marginnya yang mana thanks

Anasku said...

@Subagya

hehe makasih ya bro.. soalnya dulu waktu posting di ganggu ama keponakan sih..

anto said...

hai salam kenal ya...
mas gimana caranya tuker link/banner?
banner situs ini sudah saya pasang di blog saya lihat di http://masisman.blogspot.com/

(lihat di bagian sidebar, tukar link dan logo yuk...)

ada kiranya mas/om bisa memasang banner blog saya jg di situs ini, terimakasih dan salam kenal

herro said...

wekkksss..kok bisa barerngan yah postingnya...
btw salam kenal, kayaknya setubuh neh.

herro said...

sorry ya mas, soale ga tau. tapi ada beda dikit.hehehe.

harry said...

wah....kacau sekali nih mas...berantakan apalagi sekarang lagi mau ngejait baju baru....eh....lelet internetnya

JoVie said...

waow..keren banget nih tutornya...hweabattt...

The_Phenomenon said...

Ampun master...

Benehal said...

thks bgt bank :)

Agus said...

Mas, minta ijin nich tutorialnya boleh dipasang di webku ga, tentunya dengan mencantumkan sumbernya...

Oh ya buat temen2 yg mau tuker link denganku boleh... ini webku www.peluangonline.cn masih belum rapi sich krn masih under construction...

firman said...

wah,,mantep artikenya mas...

Ayub said...

thanks ya mas.. membantu banget nich penjelasannya

Anonymous said...

Thanxs bauangeeeeeet mas... neh yang ane cari .. awalnya ane sempet binun tuh .. alnya ane masih cupu css, hehhe tapi skrang dikit2 ngerti makasih ya ... (Maaf guru tanpa jejak dolo) but .. thnx 4 share ..!! good luck..!!

al_kisah said...

Aa, kumaha atuh.Urang teh n'te bisa bwat na. gagal trus...kumaha atuh. Ngatur na kitu..

ndyteen said...

jadi makin ngerti nie tntang CSS

Ayah Maheza said...

makasih bro infonya....ini yang saya cari...bisa template selain minima kan (template baru).

Cheat ninja saga and tips blogger said...

makasih atas infonya
tapi kenapa saya coba tidak ada perubahan ya.

mohon pencerahan nya.
salam
cheat ninja saga and tips blogger

obat herbal said...

wiiih keren mas artikelnya...ini sangat bermanfaat sekali terutama untuk diriku yang ingin belajar blog...

Tya Daihatsu said...

makasi infonya ya
sangat berguna

salam dari http://www.rajadaihatsu.com

obat kutil kelamin said...

sangat bermanfaat

obat kutil kelamin ampuh said...

boleh deh, dicoba

SOB Desain said...

terimakasih, lengkap sekali ulasannya
sangat bermanfaat untuk pemula sepeti saya ini

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas