MENGENAL MARGIN PADDING DAN BORDER BLOG

Kali ini saya akan membongkar tentang maksud atau pengertian dari ketiga kode di atas (margin, padding dan border).

seperti biasa, siapkan minuman, bisa teh manis atau teh pahit  (*_*) )
obat anti ngantuk, bisa   makanan yang ringan-ringan atau yang lainnya,
tambahan yang lain terserah Anda

Yapp, langsung ke TKP. Coba lihat gambar di bawah ini :

 

Keterangan :
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

Padding
Penulisannya : padding:3px 4px 5px 6px; urutannya dimulai dari atas, kanan, bawah dan kiri, atau kita dapat mengunakan ini :
padding-left:5px; untuk padding bagian kiri 
padding-right:5px; untuk padding kanan
padding-top:5px; untuk padding atas dan
padding-bottom:5px; untuk padding bagian bawah,
satuannya menggunakan px(pixels) atau dengan satuan yang lain yang sesuai.

Border
Penulisannya : border:1px solid #ffffff;
1px adalah ukuran border
Solid adalah style border
#ffffff adalah warna border

Untuk style... Anda bisa ganti dengan dashed, solid, double, groove, ridge, inset, outset atau yang lainnya
Untuk warna Anda bisa ganti dengan selera sendiri, silahkan Anda lihat di sini

Selain penulisan di atas, kita juga bisa menggunakan ini :
border-width:1px;
border-style:solid;
border-color:#FFFFFF;

Margin
Penulisannya : margin:5px 5px 5px 5px;
Urutan dan lain-lain sama dengan padding

Catatan :
untuk Padding nilainya tidak bisa negatif, contoh -20px;
untuk Margin nilainya bisa negatif.

 

Alhamdulillah sudah selesai nih
InsyaAllah saya lanjutkan di episode berikutnya

Bersambung...