[Login]
Sudah berlangganan artikel blog ini via RSS Feed?

09 July 2009

Pengertian Padding,Margin dan Border pada CSS

Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya 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)
Contoh Tampilan Style Border :

dotted

dashed

solid

double

groove

ridge

inset

outset

Sekian semoga bermanfaat

Bookmark and Share

Silahkan Klik disini untuk berlangganan gratis. Ingin mendapat artikel seperti ini langsung ke Email anda ? Silahkan masukan alamat email anda untuk berlangganan.

Comments :

47 komentar to “Pengertian Padding,Margin dan Border pada CSS”

artikelnya ngebantu bgt bro, haha, thx yah...

bolang said...
on 

artikelnya bagus nih heheh

NaySunarsat said...
on 

siiplah..truz di tulis tip tip buat saya

SULAMBA Prof. said...
on 

mantap bro....

HAPIA Mesir said...
on 

:-o

;))

:|

=))

Anonymous said...
on 

waduh lengkap banget

berguna banget bagi pumula

thanks ....

Software Download Full Crack Serial

Software Download Full Crack said...
on 

ini yang aq cari...thank's bro..

Hidup Sehat said...
on 

siiplah..truz di tulis tip tip buat saya

Naruto Manga Spoiler said...
on 

trims infonya...berguna banget bagi blogku....visit back ya giriayoga.blogspot.com (follow jga ya) and ayoga08.wordpress.com

Giri Ayoga said...
on 

trims ya atas infonya????
kunjungi http://arekplaosan-magetan.blogspot.com/

BlogQyu said...
on 

mantap nih

berita online dan bisnis said...
on 

terimakasih atas artikel ini, berguna sekali untuk newbie seperti saya :)

Anonymous said...
on 

akhirnya ketemu jg yg kucari, padding... mksh

Paksya said...
on 

Ini dia yang saya cari.. lagi belajar ngoprek template mas, jadi blm faham sama istilah padding,. makasih infinya mas.
salam blogger

Antiqueall said...
on 

MANFAAT BANGET TUAN....!!!
MAKASI... ;))

Athur Sinai said...
on 

thanks atas ilmunya. bermanfaat buat saya. blog walking di blog saya ya? :)

gotriogo said...
on 

;))
~x(
;)

Fajri CSS said...
on 

Mantap (y)

On The 7 said...
on 

sy nyari2 artikel kayak gini brow...ternyata ketemunya di sini

belajar seo said...
on 

nyimak gan, thanks ilmunya :p

darma wajah said...
on 

lumayan dapat tambahan ilmu soal blog dari sini

kangseo said...
on 

terimakash :')

Opik said...
on 

siip brow,.. saya menjadi lebih tahu nich,,,

Agen 338a said...
on 

ijin share boleh gak sob,..

Casino sbobet said...
on 

saya suka mengikuti blog ini sob,.. moga tambah sukses aja

Agen ibcbet said...
on 

makasih banget. sangat berguna dan bermanfaat. semoga amal kebaikan anda menjadikan hidup anda lebih sukses.

abdhi said...
on 

Jadi tau sekarang saya, makasih atas informasinya mas.

lulus utami said...
on 

makasih yaa :D

Jasa Desain Company Profile said...
on 

mantab :)

Jasa design company profile said...
on 

siang gan balik lagi nih ke blog ini ..
cuma mau ngasih saran kalo artikel hiburannya lebih di perbanyak biar ga boring ...

ale said...
on 

mantap banget infonya gan..

nambah pengetahuan lagi tentang css..

mampir juga gan.. http://klikiri.com

klikiri said...
on 

Tiada kata mantap banget, terima kasih agan yang baik hati... :-bd

cara mengencangkan payudara said...
on 

Cocok Digunakan Pada Waktu Ngedit Total Tampilan Blog ,, thx Bro

cevin firmasyah said...
on 

Sob saya ada mslh ni..
http://i1275.photobucket.com/albums/y443/LinggaNovandra/mm_zps3ebdc0ee.png
Coba lihat deh sob.
Jarak tulisan posting dengan garisnya terlalu jauh nih..
bagaimana cara supaya tidak terlalu jauh sob..Tolong bantu ya..

Lebih detail http://lsblog-cyber4rt.blogspot.com
Blognya masih baru sob..
jadi gua bingung..

Lingga Novandra said...
on 

makasih sob sudah berbagi ilmunya sangat bermanfaat...

cara kerja foredi said...
on 

hemmm makasih untuk postnya memberi ilmu baru untuk saya

Download Proposal PTK SD said...
on 

makasih buat infonya

Aussie said...
on 

thanks gan infonya ..bermanfaat

bisnis online gratis said...
on 

nice post :-o

KING ROOSTER FARM said...
on 

senang singgah di blognya agan

cara buat email di Google said...
on 

terimakasih mas brow informasinya sangat bermnafaat.

bambangmono said...
on 

nice info gan !! keren artikelnya bermanfaat, Recomended pokoknya ! cepat jaya gan !!

| Harusbaca | Informasi Baru | Sejarah | Fantastik | Gaya Hidup | Wisata | Misteri | Unik dan Menarik | Aneh dan Konyol | Tips Bermanfaat | Tentang Blogging |

Harusbaca.com said...
on 

makasih tutornya sangat membantu

amalus sholeh said...
on 

info yang sangat bermutu dengan adanya post ini memberikan pengalaman atau  pengetahuan baru untuk modal kedepan agar lebih baik dari sebelumnya,terimakasi banyak gan,sukses selalu buat penulisnya,salam kenal gan.

alat bantu wanita said...
on 

nice post :)

Arif Hosting Harga Murah dan Hosting Terbaik di Indonesia said...
on 

terima kasih banyak atas penjelasannya gan..

obat oles tahan lama said...
on 

infonya sangat bermanfaat. trimz x(

hotel murah di jakarta said...
on 
Link penghasil Dollar($) Terpercaya
  • Domain CO.CC : Raup Dollar + Custom Domain Gratis
  • Bux.to : Iklan Lebih Banyak Neeh, $$$ Makin Numpuk
  • Ziddu : Kirimlah $$$ Anda, Setiap File Anda di Download. Mau ?
  • Bux3 : Tumpuklah $$$ Terus Sampai Penuh
  • Paypal : Buat Akun Paypal Anda Sekarang.

Anda dapat menggunakan EMOTION dibawah ini :

;)) ;;) :D ;) :p :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L :)) x( :(( =))

Post a Comment

Maaf !!! Komentar bernada spam / SARA akan saya hapus.