Fungsi Margin dan Padding pada CSS
Jika Anda baru mengenal CSS, Anda mungkin pernah mendengar kata margin dan padding tetapi tidak yakin apa kegunaan dari properti CSS tersebut, atau bagaimana cara menggunakannya kedalam situs website Anda. Tenang kalian sudah datang ke tempat yang tepat karena pada tutorial ini kita akan membahas tentang apa itu fungsi margin dan padding pada CSS , selain itu kita juga akan membahas tentang perbedaan margin dan padding. Ok langsung saja kita bahas fungsi dan perbedaan dari kedua properti css tersebut .
Baca Juga : Cara Penggunaan Before After dalam CSS
Fungsi Margin dan Padding
Apa Itu Padding CSS?
Padding adalah area kosong yang berada pada sisi dalam dari sebuah elemen html. Seperti pengertiannya, padding berfungsi untuk memberikan jarak antara sebuah elemen dengan elemen lain yang berada di dalamnya . Untuk lebih jelasnya kalian bisa lihat digambar berikut ini :
Dari gambar diatas elemen 1 diberikan padding pada setiap sisinya sehingga akan terdapat jarak dengan elemen 2 . Padding sendiri memiliki 4 buah sisi yang dapat kita atur berbeda-beda sesuai dengan kebutuhan kita . Untuk mengatur padding bagian sisi kiri kita dapat menggunakan perintah “padding-left: 2px” , sedangkan untuk bagian sisi kanan kita dapat menggunakan perintah “padding-right:2px” . Untuk padding bagian atas kita dapat menggunakan perintah “padding-top:2px” dan sebaliknya untuk padding bagian bawah kita dapat menggunakan perintah “padding-bottom:2px”. Sedangkan 2px pada perintah padding tersebut merupakan ukuran dari jarak atau area kosong yang akan kita berikan. Berikut adalah contoh penulisan scribt padding pada html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div{
border: solid 2px;
border-radius: 5px;
color: #2D3E50;
font-family: 'Avenir';
font-weight: bold;
height: auto;
text-align: center;
width: 300px;
margin-bottom: 20px;
}
.tanpa-padding {
border: 2px solid red;
}
.dengan-padding-all {
border: 2px solid red;
padding: 20px;
}
.dengan-padding-part{
border: 2px solid red;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="tanpa-padding">
<p>Contoh elemen html tanpa padding</p>
</div>
<div class="dengan-padding-all">
<p>Contoh elemen html dengan padding disemua sisinya sama</p>
</div>
<div class="dengan-padding-part">
<p>Contoh elemen html dengan padding yang berbeda</p>
</div>
</body>
</html>
Hasilnya :
Dari ketiga elemen html diatas sangat terlihat perbedaan jarak antara border berwarna merah dengan text yang berada didalamnya . Pada elemen pertama saya tidak memberinya padding sama sekali sehingga jarak antara border berwarna merah dengan text yang berada di dalamnya terlihat sangat dekat sekali bahkan seperti terlihat tanpa jarak. sedangkan pada elemen ke 2 dan 3 terdapat jarak atau area kosong di antara border berwarna merah dengan text yang berada didalamnya. Untuk menentukan lebar padding kita dapat menggunakan satuan diantaranya px, em , rem dll. Setelah kita memahami apa itu padding CSS ? selanjutnya kita akan mempelajari tentang pengertian margin pada css.
Apa itu margin CSS ?
Margin adalah atau area kosong di sisi luar dari elemen html. Margin memiliki fungsi kebalikan dari fungsi padding dimana pada padding jarak yang kita atur adalah jarak bagian dalam elemen html sedangkan pada margin ini jarak yang kita atur adalah jarak pada bagian sisi luar elemen html. Untuk lebih jelasnya kalian bisa lihat digambar berikut ini :
Sama seperti padding margin juga 4 buah sisi yang dapat kita atur berbeda-beda sesuai dengan kebutuhan kita . Untuk mengatur margin bagian sisi kiri kita dapat menggunakan perintah “margin-left: 2px” , sedangkan untuk bagian sisi kanan kita dapat menggunakan perintah “margin-right:2px” . Untuk margin bagian atas kita dapat menggunakan perintah “margin-top:2px” dan sebaliknya untuk margin bagian bawah kita dapat menggunakan perintah “margin-bottom:2px”. Sedangkan 2px pada perintah margin tersebut merupakan ukuran dari jarak atau area kosong yang akan kita berikan. Berikut adalah contoh penulisan scribt margin pada html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
background-color: #ff7a59;
border-radius: 10px;
display: inline-block;
height: 200px;
line-height: 200px;
text-align: center;
vertical-align: middle;
width: 200px;
}
.dengan-margin{
margin: 20px;
}
</style>
</head>
<body>
<!--tanpa margin-->
<p>Tanpa margin</p>
<div>elemen 1</div>
<div>elemen 2</div>
<hr>
<!--dengan margin-->
<p>Dengan margin</p>
<div class="dengan-margin">elemen 3</div>
<div class="dengan-margin">elemen 4</div>
</body>
</html>
Hasilnya :
Dari scribt html diatas pada elemen 1 dan 2 saya tidak memberikannya padding sama sekali sehingga hasilnya antara elemen 1 dan 2 terlihat sangat dekat sekali jaraknya. Sedangkan pada elemen 3 dan 4 saya berikan margin sebesar 20 px sehingga akan terdapat area kosong diantara elemen 3 dan 4 .
Sekian artikel dari saya kali ini mengenai Fungsi Margin dan Padding pada CSS .
Incoming Search Terms:
- Padding adalah
- Fungsi padding adalah
- padding artinya
- Padding digunakan sebagai
- Padding-bottom adalah
- Padding HTML adalah
- Margin dan padding adalah
- Perbedaan margin dan padding