CSS 5 : Pandding di css

15/08/2017

Muhammad Faisal ~ Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. Gambar CSS Box Model berikut bisa menjelaskan dimana letak padding ini.

Seperti yang terlihat, padding berada diantara konten utama dengan border. Jadi, kenapa saya membahas border dulu sebelum padding? Ini karena untuk dapat melihat efek padding, kita harus menggunakan border. Tanpa border, padding akan susah untuk dilihat.

• 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

Jika ingin mengatur jarak pada sisi bawah bagian atas,bawah,kiri,kanan sobat cukup menggunakan syntax "padding" . Berikut contoh penggunaan syntax Padding.

yang ini saya sampai kan semoga bermanfaat

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://gustilubis.blogspot.co.id
• www.w3im.com

yang ini saya sampai kan semoga bermanfaat