Belajar CSS part 4 (Margin dan Padding)

ASSALAMU'ALAIKUM Wr. Wb.

Mengenal Margin dan Padding pada CSS

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 pada CSS

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.

berikut cara pengerjaannya

dan ini hasilnya

• Padding pada CSS

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 cara pengerjaannya

dan ini hasilnya

Penggunaanya sama seperti margin tetapi dapat kita lihat apa perbedaanya!, yaitu margin dapat merubah jarak antara font dengan sisi yang kiri dari kotak berwarna merah dan merubah sisi yang kanan dari kotak berwarna biru.

Sekian dari saya apabila ada kesalahan saya minta maaf. TerimaKasih

WASSALAM