Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Margin Dan Padding Pada CSS
Masih dalam pembahasan tentang macam-macam Property pada CSS.
Pada tutorial kali ini kita akan membahas tentang property margin dan padding.
Mungkin anda akan bertanya, apa itu margin dan padding?
Secara umum, margin dan padding merupakan dua buah properti yang berfungsi untuk mengatur jarak antara sebuah Tag atau Elemen HTML yang satu dengan yang lain.
Kedua property ini merupakan property penting yang banyak digunakan oleh para designer web dalam mengatur tataletak sebuah halaman website.
Lalu apa perbedaan antara margin dan padding?
Untuk mengetahui perbedaan kedua property tersebut mari kita bahas satu persatu.
Seperti biasa sebelum kita memasuki pembahasan, silahkan anda buat sebuah folder baru didesktop anda dengan nama belajar_margin_padding_css, dan jangan lupa untuk memastikan teks editor dan browser anda bisa berfungsi dengan baik.
MENGENAL MACAM-MACAM MARGIN DAN NILAI YANG BISA DIGUNAKAN PADANYA
Margin
Properti margin berfungsi untuk mengatur jarak antara sebuah Tag atau elemen HTML dengan Tag atau Element HTML yang berada diluarnya. Perhatikan gambar dibawah ini :
Perhatikan tanda panah diatas. Semua tanda panah yang mengarah keluar diatas sebagai gambaran fungsi property margin, yaitu memberi jarak kepada Tag atau Element yang berada luarnya.
Pengaturan margin bisa dilakukan pada empat sisi, yaitu sisi atas, sisi bawah, sisi kanan dan sisi kiri sebagaimana yang ditunjukkan pada gambar diatas.
Oleh karena itu, berdasarkan keempat sisi tersebut property margin ini terbagi menjadi empat macam property yang berfungsi untuk mengatur masing-masing sisi tersebut, yaitu :
- margin-top : untuk mengatur margin atas
- margin-bottom : untuk mengatur margin bawah
- margin-right : untuk mengatur margin right
- margin-left : untuk mengatur margin left
Nilai yang bisa digunakan pada masing-masing margin diatas diantaranya adalah :
- auto : untuk memberikan ukuran margin secara otomatis
contoh penulisan kode :
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
- ukuran : yaitu dengan menggunakan angka dengan diakhiri satuan tertentu
contoh penulisan kode :
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
- persentase : yaitu mengatur margin dengan perhitungan persentase
contoh penulisan kode :
margin-top: 10%;
margin-right: 5%;
margin-bottom: 10%;
margin-left: 5%;
Agar lebih jelas mari kita praktekkan penggunaan property margin diatas ke dalam file HTML.
Silahkan buka teks editor anda lalu ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Property Margin</title>
<style type="text/css">
#margin{
margin-top: 10%;
}
</style>
</head>
<body>
<table border="3" width="100%">
<tr>
<td>
<table border="3" id="margin">
<tr>
<td>INI ADALAH TABEL YANG MENGGUNAKAN TOP MARGIN DENGAN NILAI 10%</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengan nama contoh_margin_pertama.html didalam folder belajar_margin_padding_css lalu jalankan dibrowser anda maka hasilnya kira-kira seperti ini :
Perhatikan bagian atas tabel yang terdapat didalam memiliki jarak dengan tabel yang berada diluarnya. Itulah yang disebut margin.
Mari kita coba lagi dengan contoh lain. Silahkan buka kembali teks editor (buat file baru) anda lalu ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Property Margin</title>
<style type="text/css">
#margin{
margin-top: 10%;
margin-left: auto;
margin-right: 200px;
margin-bottom: auto;
}
</style>
</head>
<body>
<table border="3" width="100%">
<tr>
<td>
<table border="3" id="margin">
<tr>
<td>INI ADALAH TABEL YANG MENGGUNAKAN NILAI : <br>
margin-top: 10%; <br>
margin-left: auto; <br>
margin-right: 200px; <br>
margin-bottom: auto; <br>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengen nama contoh_margin_kedua.html didalam folder belajar_margin_padding_css lalu jalankan dibrowser anda maka hasilnya kira-kira seperti ini :
Padding
Properti margin berfungsi untuk mengatur jarak antara sebuah Tag atau elemen HTML dengan Tag atau Element HTML yang berada didalamnya. Perhatikan gambar dibawah ini :
Perhatikan semua tanda panah yang mengarah kedalam diatas, tanda panah tersebut sebagai gambaran fungsi property padding, yaitu memberi jarak kepada Tag atau Element yang berada didalamnya.
Seperti yang bisa dilihat pada gambar diatas, pengaturan padding juga bisa dilakukan pada empat sisi, yaitu sisi atas, sisi bawah, sisi kanan dan sisi kiri.
Sebagaimana property margin, property padding juga terbagi menjadi empat macam property berbeda yang berfungsi untuk mengatur masing-masing sisi tersebut, yaitu :
- padding-top : untuk mengatur margin atas
- padding-bottom : untuk mengatur margin bawah
- padding-right : untuk mengatur margin right
- padding-left : untuk mengatur margin left
Nilai yang bisa digunakan pada masing-masing pada property padding sama seperti nilai pada property margin yaitu :
- auto : untuk memberikan ukuran padding secara otomatis
contoh penulisan kode :
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
- ukuran : yaitu dengan menggunakan angka dengan diakhiri satuan tertentu
contoh penulisan kode :
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
- persentase : yaitu mengatur margin dengan perhitungan persentase
contoh penulisan kode :
padding-top: 10%;
padding-right: 5%;
padding-bottom: 10%;
padding-left: 5%;
Agar lebih jelas mari kita praktekkan penggunaan property padding diatas ke dalam file HTML.
Silahkan buka teks editor anda lalu ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Property Margin</title>
<style type="text/css">
#padding{
padding-left: 10%;
}
</style>
</head>
<body>
<table border="3" width="100%" id="padding">
<tr>
<td>
<table border="3">
<tr>
<td>INI ADALAH TABEL YANG MENGGUNAKAN LEFT PADDING DENGAN NILAI 10%</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengen nama contoh_padding_pertama.html didalam folder belajar_margin_padding_css lalu jalankan dibrowser anda maka hasilnya kira-kira seperti ini :
Perhatikan bagian atas tabel dua memiliki jarak dengan tabel satu. Itulah yang disebut padding.
Sekarang mari kita coba lagi dengan contoh lain. Silahkan buka kembali teks editor (buat file baru) anda lalu ketikkan atau copy-paste kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Property Padding</title>
<style type="text/css">
#padding{
padding-top: 10%;
padding-left: 200px;
padding-right: auto;
padding-bottom: auto;
}
</style>
</head>
<body>
<table border="3" width="100%" id="padding">
<tr>
<td>
<table border="3">
<tr>
<td>INI ADALAH TABEL YANG MENGGUNAKAN NILAI : <br>
padding-top: 10%;<br>
padding-left: 200px;<br>
padding-right: auto;<br>
padding-bottom: auto;<br>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Kemudian simpan dengen nama contoh_padding_kedua.html didalam folder belajar_margin_padding_css lalu jalankan dibrowser anda maka hasilnya kira-kira seperti ini :
MENYINGKAT PENULISAN KODE
Untuk menyingkat penulisan kode pada property margin dan padding kita bisa menggunakan property margin dan padding tanpa tambahan posisi top,left,right,dan bottom seperti yang teah dijelaskan diatas dengan aturan penulisan kode sebagai berikut :
Margin
margin : margin-top margin-right margin-bottom margin-left
Padding
padding : padding-top padding-right padding-bottom padding-left
Nah itulah macam-macam property margin dan padding beserta nilai dan cara menggunakannya.
Alhamdulillah sekarang kita sudah mengerti tentang property margin dan padding.
Lalu, selanjutnya kita belajar apa?
In sya aLLAH selanjutnya kita akan belajar tentang Cara Menggunakan Property Font Pada CSS.
Untuk membaca tutorial selanjutnya silahkan klik Disini.
Semoga Bermanfaat.