Tutorial CSS - perbedaan padding dan margin
Perbedaan padding dan margin pada css, tutorial kali ini kita akan membahas tutorial ringan mengenai apa perbedaan padding dan margin pada css. Padding digunakan untuk memberikan ruang pada element yang membungkusnya atau memberikan ketebalan bidang element, sedangkan margin digunakan untuk memberikan ruang antara element satu dengan yang lainnya.
Artikel ini sengaja saya buat karena adanya pencarian yang masuk di blog ini dengan keyword perbedaan padding dan margin.
Ilustrasi ringan untuk memahami perbedaan padding dan margin adalah, anda mempunyai rumah yang ada pagarnya, nah padding itu ibarat jarak antara pagar dengan rumah anda.
Sedangkan ilustrasi untuk margin adalah anda mempunyai tetangga dan antara rumah anda dengan rumah tetangga anda mempunyai selokan sebagai pembatas, nah selokan tersebut adalah kiasan untuk margin.
Sudah pahamkan apa perbedaan padding dengan margin, jika belum paham silahkan dibaca lagi dari awal. Jika kurang jelas, bisa dilihat pada bagian demo.
Dari Penjelasan diatas pasti anda sudah bisa memahami apa perbedaan padding dengan margin. Mari kita bahas lebih detail biar nantinya setelah membaca artikel ini anda tambah pinter dalam hal css, silahkan pelajari contoh di bawah ini.
Contoh Penggunaan CSS Padding
<div style="padding:12px;">...</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
div {
border: 1px solid black;
background: #ffeaee;
text-align: justify;
margin-bottom : 20px;
}
</style>
</head>
<body>
<div style="padding:12px;">
<b>Jarak antara garis hitam dengan teks adalah padding dengan nilai 12px</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius orci vel turpis sodales bibendum. Nunc placerat, ex in ultrices convallis, massa tellus ullamcorper arcu, quis rhoncus est nunc eget nunc. In hac habitasse platea dictumst.
</div>
<div style="padding:30px;border-color:red">
<b>Jarak antara garis Merah dengan teks adalah padding dengan nilai 30px</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius orci vel turpis sodales bibendum. Nunc placerat, ex in ultrices convallis, massa tellus ullamcorper arcu, quis rhoncus est nunc eget nunc.
</div>
</body>
</html>
Contoh Penggunaan CSS Margin
<div style="background:blue;margin:20px">margin:20px</div>
<div style="background:green;margin:20px">margin:20px</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
div {
border: 1px solid black;
text-align: justify;
height :75px;
}
</style>
</head>
<body>
<h3>Box merah dan kuning tidak diberi jarak / margin</h3>
<div style="background:red;">Tanpa margin</div>
<div style="background:yellow">Tanpa margin</div>
<h3>Box biru dan hijau memiliki jarak / margin</h3>
<div style="background:blue;margin:20px">margin:20px</div>
<div style="background:green;margin:20px">margin:20px</div>
<h3>Box pink dan ungu memiliki margin yang disetting untuk bagian bawah saja yaitu margin-bottom</h3>
<div style="background:pink;margin-bottom:20px">
margin-bottom:20px
</div>
<div style="background:purple;margin-bottom:20px">
margin-bottom:20px
</div>
</body>
</html>