- Back to Home »
- Margin dan Padding CSS
Posted by : fadly injoker
2017/10/03
Assalamualaikum Wr.Wb
Margin dan Padding adalah kode syntax yang paling sering digunakan untuk membuat sebuah website karena fungsi dari margin dan padding adalah mengatur sisi dalam sebuah element dan mengatur sisi luar sebuah element . Pada tutorial kali ini akan dijelaskan apa itu Margin ? apa itu Padding ? dan bagaimana cara penggunaanya
Margin
Margin adalah sisi luar dari sebuah elemen. Misalnya sobat ingin mengatur jarak luar antar element sobat dapat menggunakan syntax margin ini. Kita dapat mengatur jarak sebuah sisi yang kita kehendaki, berikut penjelasanya.
Sobat juga dapat menggunakan syntax "margin" saja maka otomatis akan mengatur jarak atas,bawah,kiri,kanan elemen.
Perhatikan contoh diatas. Pada kotak-dua saya menggunakan margin-left atau margin kiri sebesar 60px atau 60 pixel, dan pada kotak pertama saya berikan margin sebesar 25px yaitu jarak luar segala element sebesar 25px.
Padding
Padding adalah jarak sisi dalam sebuah element. Kita dapat mengatur jarak pada sisi dalam sebuah element dengan padding. Sama seperti yang memiliki sisi top,right,left,right . Berikut fungsi Syntax CSS yang berhubungan dengan padding
- padding-top : Mengatur jarak bagian dalam pada sisi sebelah atas elemen
- padding-bottom : Mengatur jarak bagian dalam pada sisi sebelah bawah elemen
- padding-left : Mengatur jarak bagian dalam pada sisi sebelah kiri elemen
- padding-right : Mengatur jarak bagian dalam pada sisi sebelah kanan elemen
Penggunaanya
sama seperti margin tetapi dapat kita lihat apa perbedaanya ? yaitu
margin dapat merubah jarak antara font dengan sisi bagian kiri dari
kotak berwarna merah.
Kesimpulan
Dapat
kita simpulkan bahwa Padding berfungsi untuk mengatur jarak luar elemen
dan padding mengatur jarak dalam elemen. Dua syntax CSS tersebut sangat
penting kita pahami agar website yang kita buat nanti dapat terlihat
menarik dan terstruktur alias tidak acak-acakan.
Referensi
- http://www.script-kiddies.org
- http://www.malasngoding.com/