CSS Margin dan Padding

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.
Deklarasi margin dan padding dapat dituliskan seperti ini:
- margin:5px;
- padding:5px;
5px
adalah contoh value dari properti margin
dan padding
. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em
, pt
ataupun %
, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px
, -100px,
dll.
Margin dan padding dapat dipecah menjadi empat bagian seperti ini:
Deklarasi | Keterangan |
---|---|
margin-top:5px; | Menentukan margin sebelah atas sebesar 5 piksel |
margin-right:5px; | Menentukan margin sebelah kanan sebesar 5 piksel |
margin-bottom:5px; | Menentukan margin sebelah bawah sebesar 5 piksel |
margin-left:5px; | Menentukan margin sebelah kiri sebesar 5 piksel |
padding-top:5px; | Menentukan padding sebelah atas sebesar 5 piksel |
padding-right:5px; | Menentukan padding sebelah kanan sebesar 5 piksel |
padding-bottom:5px; | Menentukan padding sebelah bawah sebesar 5 piksel |
padding-left:5px; | Menentukan padding sebelah kiri sebesar 5 piksel |
Atau kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin
/padding
saja seperti ini:
Deklarasi | Keterangan |
---|---|
margin:1px 2px 3px 4px; | Margin atas: 1 piksel Margin kanan: 2 piksel Margin bawah: 3 piksel Margin kiri: 4 piksel |
margin:1px 2px 3px; | Margin atas: 1 piksel Margin kanan dan kiri: 2 piksel Margin bawah: 3 piksel |
margin:2px 4px; | Margin vertikal (atas dan bawah): 2 piksel Margin horizontal (kanan dan kiri): 4 piksel |
padding:1px 2px 3px 4px; | Padding atas: 1 piksel Padding kanan: 2 piksel Padding bawah: 3 piksel Padding kiri: 4 piksel |
padding:1px 2px 3px; | Padding atas: 1 piksel Padding kanan dan kiri: 2 piksel Padding bawah: 3 piksel |
padding:2px 4px; | Padding vertikal (atas dan bawah): 2 piksel Padding horizontal (kanan dan kiri): 4 piksel |
6 Komentar
Admin
terimak kasih infonya, tapi bingung :D
Andi AF Studio
wah..wah..wah..wah.. curiga nih, wkwkwkwk.. tes ah tes ah..
petunjuk menuju harta karun nih.. :D
Admin 3
makasih gan atas penjelasannya, akhirnya saya paham juga, hehe..!!
Sukses aja ya gan..!! :)
Unknown
maaf sekali lagi kalo spam
cuma mau ngucapin minal aidin wal faidzin mas :D
Unknown
cara buat komentar kayak gini gmna y?
hmm, butuh konsentrasi css ni :D
sukses selalu buat masny :D
Taufik Nurrohman
@Asmara Susanto: Maaf lahir batin juga ya...