Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Margin Dan Padding Pada CSS

Jan 12, 2020

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.

folder belajar_margin_padding_css

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 :

gambaran fungsi property margin

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 :

contoh hasil penerapan property margin-top

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 :

contoh hasil penerapan berbagai property margin

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 :

gambaran fungsi property padding

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 :

contoh penerapan property padding

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 :

contoh penerapan property padding

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.

ibnulhusainan

Saya sangat suka belajar berbagai macam bahasa pemrograman.