Tutorial Cascading Style Sheet (CSS) - Margin vs Padding

Pada tutorial kali ini kita akan membahas tentang pengertian margin dan padding. Bagi para pemula pengetahuan mengenai margin dan padding sangatlah penting, karena banyak kita jumpai para pemula yang tidak mengindahkan mengenai hal ini, dan dianggapnya antara margin dan padding itu sama.
Memang antara keduanya sekilas sama, karena sama-sama mengatur sepasai kosong atau jarak antara spasi kosong dengan elemen.
Untuk itu perlu kita perjelas mengenai kedua hal tersebut.
Margin : Adalah mengatur jarak atau spasi kosong pada bagian luar elemen. (terhadap elemen lainnya).
Padding : Adalah mengatur jarak atau spasi kosong pada bagian dalam elemen.
Untuk memberikan gambaran yang jelas mengenai hal ini, akan kita berikan gambaran yang jelas agar pemahaman mengenai kedua hal tersebut seperti gambar berikut :

Misalkan kita memiliki elemen p (paragraf), dimana dalam paragraf tersebut akan di berikan bingkai garis yang melingkupi kalimat pada paragraf tersebut.
Kemudian dari paragraf tersebut akan diatur margin seperti berikut :
Margin atas : 150px,
Margin kanan : 120px,
Margin bawah : 130px,
Margin kiri : 110px,

Sehingga berdasarkan teknik shorthand properties yang sudah dibahas pada tutorial sebelumnnya, cara menuliskannya adalah margin:20px 30px 40px 50px.
Pada paragraf tersebut akan dilingkupi dengan garis tepi (border) dengan berwarna agar lebih mempertajam pemahaman mengenai border. (tebal tipis garis bingkai).
Sehingga kode selengkapnya untuk CSS tersebut seperti berikut :


<style>
p {
    background-color: #24B200;
}

p.contoh {
 /* border dengan ketebalan 3px */
    border: 3px solid red;
    margin :190px 150px 110px 200px;
    
}
</style>

Dan kode HTML selengkapnya selengkapnya adalah sebebagi berikut :


<!DOCTYPE html>
<html>
<head>
<style>


p {
    background-color: #24B200;
}

p.contoh {
 /* border dengan ketebalan 3px */
    border: 3px solid red;
 /* margin : atas kanan bawah kiri */
    margin :190px 150px 110px 200px;
}
</style>
</head>
<body>

<h2>Margin</h2>

<p>Margin ini tidak terpengaruh dengan properti yang diatur margin, namun diberikan background warna</p>
<p class="contoh">Paragraf ini menyesuaikan dengan pengaturan paragraf</p>
<p>Margin ini juga tidak terpengaruh</p>

</body>
</html>

Sehingga akan menghasilkan seperti gambar berikut:

Dari gambar disamping kelihatan bahwa elemen paragraf yang diatur diberikan dengan bingkai merah, dimana antara bingkai dengan teks didalamnya tidak ada jarak, karena dalam pengaturan elemen tersebut belum diberikan padding.
Sekarang dari CSS diatas akan kita kembangkan lagi agar paragraf/teks di dalam bingkai mempunya jarak antara tulisan dengan bordernya.
Teknik menuliskan pading juga menggunakan teknik shorthand properties, dengan menuliskannya dalam satu baris seperti cara menuliskannya margin. Buka dokumen html lagi dan tambahkan properti pading pada elemen tag seperti gambar berikut :


<!DOCTYPE html>
<html>
<head>
<style>
body
{
 margin-left:200px;
 max-width:1000px;
 max-height:800px;
 border:1px solid black;
}


p {
    background-color: #24B200;
}

p.contoh {
 /* border dengan ketebalan 3px */
    border: 3px solid red;
 /* margin : atas kanan bawah kiri */
    margin :190px 150px 110px 200px;
 /* teknik menuliskan shorthand jika jarak atas-bawah sama dan jarak tepi kiri-kanan sama */
    padding : 50px 20px;
}
</style>
</head>
<body>

<h2>Margin</h2>

<p>Margin ini tidak terpengaruh dengan properti yang diatur margin, namun diberikan background warna</p>
<p class="contoh">Paragraf ini menyesuaikan dengan pengaturan paragraf sesuai dengan pengaturan antara margin atas, kanan, bawah, dan margin kiri dan efek
penerapan penggunaan properti padding............</p>
<p>Margin ini juga tidak terpengaruh</p>

</body>
</html>

Setelah itu coba dipanggil menggunakan browser akan menghasilkan seperti gambar berikut dan amatilah elemen paragraf/teks di dalam bingkai tersebut sudah mengalami perubahan adanya jarak antara tulisan dengan bingkai.

Demikian tutorial mengenai margin dan padding, semoga dengan pengetahuan ini tidak lagi membingungkan bagi para pemula, dan juga sebagai bahan dalam desain yang mementingkan estetika untuk menghasilkan karya yang menarik.
Semangat belajar, Salam berkarya dan salam coding.
Thx

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Margin vs Padding