Ketiga properti dalam CSS seperti padding, border, dan margin termasuk dalam konsep dasar Box Model CSS, yaitu cara CSS memperlakukan elemen sebagai kotak yang terdiri dari konten, padding, border, dan margin. Ketika properti tersebut sangat penting untuk mengatur tata letak dan jarak antar elemen. Pada artikel ini, kita akan memahami tentang perbedaan, fungsi, dan cara penggunaan dari padding, border, dan margin di CSS.

Apa itu Box Model dalam CSS?

Sebelum kita lanjut ke materi selanjutnya, akan lebih baik untuk mengenal Box Model dalam CSS. Setiap elemen pada HTML dianggap sebagai kotak yang terdiri dari:

Content berisikan teks atau gambar.
Padding jarak antara content dan border.
Border garis tepi yang mengelilingi elemen.
Margin jarak antara elemen dengan elemen lainnya.

Padding: Jarak di Dalam Elemen

Padding adalah ruang antara konten elemen dan bordernya. Padding membuat ruang didalam elemen tanpa mempengaruhi posisi elemen lain. Jadi, padding hanya akan mengatur jarak yang ada didalam elemen, tanpa mengganggu elemen disampingnya. Contoh penggunaan padding sebagai berikut:

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  padding: 20px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
		<div class="box2">
		 <p>Box 2</p>
		</div>
	</body>
</html>

Pada kode diatas, .box1 akan menambahkan ruang sebesar 20 piksel di sekeliling isi elemen dari class .box1 tanpa mengganggu posisi dari elemen .box2. Kita bisa melakukan padding di sisi tertentu dengan menggunakan properti dibawah ini.

padding-top untuk mengatur jarak sisi atas didalam elemen.
padding-right untuk mengatur jarak sisi kanan didalam elemen.
padding-bottom untuk mengatur jarak sisi bawah didalam elemen.
padding-left untuk mengatur jarak sisi kiri didalam elemen.

Border: Garis Tepi pada Elemen

Border adalah garis yang mengelilingi konten elemen. Berikut contoh penggunaanya.

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  border: 2px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
	</body>
</html>

Pada contoh kode diatas, elemen .box1 akan menampilkan garis di setiap sisi elemen. Kita juga bisa mengatur warna, ketebalan, dan gaya dari garis. Sesuaikan kode CSS sebelumnya seperti dibawah ini.

.box1 {
 border: 2px solid #333;
}

Penjelasan dari kode diatas adalah.

border merupakan properti untuk menampilkan garis pada sisi elemen.
2px ketebalan dari garis.
solid gaya dari garis, kita juga dapat menggunakan gaya border lainnya seperti dashed, dotted, ataupun double.
#333 warna pada garis.

Margin: Jarak Antar Elemen

Kebalikan dari Padding, Margin memiliki fungsi untuk memberikan jarak antar elemen agar tidak terlalu menempel satu sama lain. Berikut contohnya.

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  margin: 10px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
		<div class="box2">
		 <p>Box 2</p>
		</div>
	</body>
</html>

Pada kode diatas, elemen .box1 akan memberikan jarak sebesar 10 piksel terhadap elemen box2. Kita juga bisa memberikan margin di sisi tertentu dengan properti dibawah ini.

margin-top mengatur jarak sisi atas luar elemen.
margin-right mengatur jarak sisi kanan luar elemen.
margin-bottom mengatur jarak sisi bawah luar elemen.
margin-left mengatur jarak sisi kiri luar elemen.

Tips Membuat Elemen Berada di Tengah Menggunakan Margin.

Kita bisa membuat elemen berada di tengah secara horizontal dengan cara berikut.

.box1 {
 margin: auto;
}

Cara diatas memang sering digunakan untuk membuat elemen berada ditengah, namun tidak se-efisien saat kita menggunakan CSS Flexbox.

Kesimpulan

Dengan memahami dan menggunakan padding, border, dan margin secara tepat, kita bisa menciptakan layout pada halaman web yang lebih profesional, mudah dibaca, dan nyaman untuk dilihat.

Terimakasih, sampai jumpa di artikel selanjutnya.