Pengertian Border, Padding, Dan Margin Pada CSS

Jika kita sering menggunakan atau mengetik sesuatu dengan program-program text atau image editor, maka kita pasti sering menggunakan Border, Padding, Dan Margin untuk merapikan tulisan atau pun posisi gambar yang kita buat. Dalam proses design website ataupun template blog juga kita pasti akan menggunakan istilah tersebut.

Border : Adalah garis tepi atau garis pembatas dari komponen.
Padding : Menentukan jarak komponen body atau Ukuran jarak bagian dalam ke border
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak diluar garis Border

Sebetulnya apa sich border , padding, dan margin itu??

Dan fungsinya apa??

Kapan penggunaanya??

Agar lebih mudah dimengerti maka kita bisa langsung praktek pada gambar dibawah ini. Pada posting kali ini kita akan sedikit menggunakan trik yang saya bahas di posting sebelumnya yaitu tentang Inspect Element. Jika belum baca maka silakan baca dulu postingannya disini.

Kalau sudah membaca dan sedikit mengerti tentang inspect element ini, maka langsung saja kita masuk ke tutorialnya.

1. Letakkan mouse pada gambar -> klik kanan -> Pilih Inspect Element.

Pada bagian yang saya lingkari dengan warna merah kalian sudah bisa melihat kode CSSnya. Namun karena kita hanya ingin melihat fungsi dari Border, Padding, Dan Margin, maka kita tidak langsung mengetikkan kode secara langsung. Oleh sebab itu maka:

2. Klik satu kali pada tulisan Style sehingga bagian tersebut tertutup kemudian klik pada bagian metrics sehingga kita akan mendapatkan seperti dibawah ini.

3. Disitu sudah ada keterangan tentang dimana posisi border, padding dan marginnya sehingga kita tinggal rubah angka-angkanya saja. Sekarang kalian isi/rubah saja angka-angka tersebut sesuai selera kalian. Caranya klik saja pada bagian tanda - atau angka-angka yang ada.

Sebagai contoh:

Pada kolom margin ganti semua tanda - dengan angka 3, 5, 7, atau 30.

Pada kolom border ganti angka 3 juga ganti dengan angka yang sama.

Demikian juga pada kolom padding, ganti semua angka 2 dengan angka sesuai selera kalian.

Waaaaa...

Gambar sama blog ane hancur...

Tenang saja... Kalian ganti seribu kali pun setelah di refresh blognya akan kembali normal kok. Karena fungsi dari inspect element ini kan hanya agar kita lebih mudah melihat hasil preview yang kita inginkan.

Heheee...

Nah..

Gampang bukan??

Kalau kalian suka dengan artikel-artikel blog ini atau mau tahu cara-cara mudah dalam belajar design blog lebih lanjut, kalian tunggu saja postingan berikutnya... Kalian bisa mendapatkan kabar atau posting terbarunya lewat email kalian. Gratis kok. Tinggal masukkan saja email kalian di bagian subcriber di samping.