Popular Post

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.



  • margin-top : Mengatur jarak bagian luar pada sisi sebelah atas elemen
  • margin-bottom : Mengatur jarak luar dalam pada sisi sebelah bawah elemen
  • margin-left : Mengatur jarak bagian luar pada sisi sebelah kiri elemen
  • margin-right : Mengatur jarak bagian luar pada sisi sebelah kanan elemen

  • 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
    Jika ingin mengatur jarak pada sisi bawah bagian atas,bawah,kiri,kanan sobat cukup menggunakan syntax "padding" . Berikut contoh penggunaan syntax Padding



    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/

    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

    - Copyright © FadlyBlog - Date A Live - Powered by Blogger - Designed by Johanes Djogan -