CSS : Padding dan Margin pada CSS

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

MENGENAL 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

Kawan juga dapat menggunakan syntax "margin" saja maka otomatis akan mengatur jarak atas,bawah,kiri,kanan elemen.Untuk lebih jelasnya di bawah ini saya cantumkna sedikit contoh dari penggunaan padding dan margin :

<!DOCTYPE html>
<html>
<head>
    <title> Belajar Margin CSS </title>
    <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
    <div class="kotak">
        <h1> Bagian 1 </h1>
    </div>

    <div class="kotak-2">
        <h1>Bagian 2 </h1>
    </div>

</body>
</html>

.kotak{
    background: #33CC99;
    color: black;
    padding: 25px;
    width: 400px;
    height: 150px;
}
.kotak-2 {
    background: #000033;
    color: white;
    width: 450px;
    height: 150px;
    margin-left: 60px;
}


Hasil script html

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.

MENGENAL 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 contoh penggunaan syntax Padding.

<!DOCTYPE html>
<html>
<head>
   <title> Belajar Padding CSS </title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="kotak">
       <h1> Bagian 1 </h1>
   </div>

   <div class="kotak-2">
       <h1>Bagian 2 </h1>
   </div>
</body>
</html>

.kotak{
   background: #33CC99;
   color: black;
   padding: 25px;
   width: 400px;
   height: 150px;
}
.kotak-2 {
   background: #000033;
   color: white;
   width: 450px;
   height: 150px;
   padding-left: 450px;
}

Hasil padding saat di run

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 : www.malasngoding.com