Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

Arti Margin, Padding, Border dan Penggunaanya dalam CSS

Topik tutorial Blogger kali ini mengenai CSS "Pengertian Margin, Padding, dan Border". tentu bagi CSS developer yang sudah berpengalaman ini topik yang sangat sederhana. Tapi saya pikir juga ga ada salahnya sharing topik CSS basic ini, arti dan penyajian elemen dengan menggunakan kode CSS untuk margin, padding serta border property.

Dengan memahami margin, padding, border dan cara menerapkan dengan CSS, akan memberi kesempatan bagi blogger (pemula), untuk bereksperimen sendiri dengan menentukan dan mengatur sifat dan nilai property. Ini sering dijumpai pada penerapan css style pada template, .body {..},.sidebar {...},. container {...}, css widget, pengaturan posisi dan jarak (space) antara sidebar, penerapan pada pargaraf posting, pada h1, h2.....dst.

Apa Margin itu?

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Secara visual akan lebih mudah memahami definisi dari margin ini :

visualisasi pengertian margin
visualisasi pengertian margin

Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa penulisan margin dalam css.

Contoh penulisan margin pada suatu elemen ("shorthand")

#element { margin: 10px;}
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; }
Ini berarti elemen memiliki:
-margin-top, margin-bottom : "10px"
-margin-left, margin-right : "20px"

#element { margin: 10px 20px 5px 15px; }
Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-left: 15px

Berikut penulisan margin style "longhand":
#element { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}

Apa Padding itu?

Jadi bagaimana dengan padding? Nah, padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.

Padding juga dapat dipahami sebagai "filling". Karena  padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi/border dan isi dari elemen. (lihat visual dibawah)

visual definisi padding
visual definisi padding

Dari gambar diatas dapat diartikan padding adalah ruang yang diatur antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini isi konten berupa text).
Serupa dengan margin, padding juga diatur menggunakan properti padding "shorthand"  dan juga dapat dilakukan dengan properti padding "longhand": padding-top, padding-right, padding-bottom, dan padding-left.

Contoh :
#element { padding: 10px; }/*padding untuk semua sisi sama 10px*/
#element { padding: 5px 10px 2px 4px; }/*padding: Top, Right, Bottom, Left*/ 
#element { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} 

Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Penerapannya padding sering dijumpai  hampir disemua elemen, sebagai contoh pengggunaan padding pada heading (h1, h2, h3....) di postingan.

Contoh :
h1 { background: yellow;
padding: 20px 20px 20px 80px;}

h2 { background: orange;
padding-left:120px;}

Hasilnya pada postingan Anda akan seperti ini :

heading dan padding

Apa arti Border?

Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.

CSS memberi Anda pilihan dalam menggunakan border antara lain :
  • border-style
  • border-width
  • border-color
  • border-individual
Border Style
Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!
Ada 9 type border-style values yang umum digunakan dalam CSS :
1. None : mendefinisikan tidak ada border
border style
2. Dotted : berarti border berupa dot (titik)
Dotted
3. Dashed : border berupa dashed (garis putus-putus)
Dashed
4. Solid : border yang solid
Solid
5. Double : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width
 Double
6. Groove : mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color
Groove
7. Ridge: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color
 Ridge
8. Inset: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color
9. Outset : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color
Outset

Border Width
Properti border-width digunakan untuk mengatur lebar border/garis tepi. Border diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.

Border Width
ukuran border dalam pixel dan value thin, medium, thick

Contoh :

p{ border-style:solid; border-width:5px; }

p{ border-style:solid; border-width:medium; }

p{ border-style:solid; border-width:1px; }

Border Color
Properti border-color mendefinisikan warna yang dimiliki oleh border. Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456", rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border menjadi "transparent".

color chart
chart warna hex
Contoh :
Border Color






Border - Individual sides
Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi:
Border - Individual




Nah, gabungan dari pengaturan margin, padding dan border pada sebuah elemen dalam CSS sering disebut juga dengan "box model".
Diagram di bawah ini menunjukkan bagaimana box model dibangun:
diagram model box
diagram model box
* Problogiz juga pernah sharing mengenai macam dan style box model dengan berbagai style border, check in HERE 

Wah panjang ya Sob, tuorial CSS ini :)
Tapi semoga gak tambah bingung dengan sharing tentang pemahaman margin, padding dan border ini dan sedikit menyegarkan pengetahuan kita mengenai CSS dan menggunakan CSS untuk mengatur sendiri style dan tata letak halaman web/blog Anda. 
Anda juga bisa datang di w3schools.com sebagai tempat belajar CSS yang tepat.

Cukup sekian dulu......and Cheers!!!
Artikel Terkait Lainnya:
Click here for comments

18 komentar

Lengkap sekali penjabaranyya kawan, bisa menambah wawasan saya nih, terimakasih atas berbaginya.

REPLY

hehe thanks mas:)
lagi senang nulis nih

REPLY

Wah lengkap sekali,,, jujur saya baru tau disini tentanng PAdding.. klo margin sudah tau..

REPLY

thanks Odink:)
senang mendengarnya..hehe

REPLY

Penjelasannya sangat begitu detail...I like. saya ijin save sob...buat belajar secara offline saja hehe...

REPLY

terimakasih, ini yg saya cari, soalnya ketika utak-atik jarak msh coba 1 persatu dan bingung. sdngkn artikel ini mmberikan sedikit pencerahan, dan tolong kl bisa bahasanya lebih dipermudah lagi, dan gambar2 tsb sgt mmbntu pemahaman.

REPLY

cara supaya share floating mengikuti scroll gmn? seperti diblog ini

REPLY

hehe....ok sob
thanks anyway:)

REPLY

cara buat share float seperti blog ini, disini mas :
Mashable Floating Button Share

REPLY

bro follback blog saya > http://liong-seo.blogspot.com/ saya udh follow di blog sobat, dengan nama liong outsider, ditunggu follbacknya, awas klo ndak follback, hehehe dan

dan saya udh klik G+1 diatas sob, minta bantuan klik G+1 ya, tolong klik G+1 di artikel saya yang rajawebhost, G+1 ada di bawah artikel tunggu sampai muncul, minta tolong sangat bro, makasi, :)

REPLY

ok sob semua udah saya lakukan hehe:)
Folback,G+,FBlike dan plus koment di artikel rajawebhost

REPLY

tanks gan infonya..
ne blog ku gan...
thephatar.blogspot.com

REPLY

Terima kasih banyak gan.
Pas banget lagi belajar CSS, sangat membantu dengan penjelasan detail

REPLY

Terima kasih mas sudah menjelaskan ..
dan akhirnya sekarang sudah lumayan paham .. :D
Terima kasih Sekali lagi..

REPLY

akhirnya saya ngerti juga tentang margin padding
terimakasih atas informasinya

REPLY

makasih sob atas artikelnya,, kunjungi juga blog gw di http://rahmat-priatna.blogspot.com.

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|