CSS

Belajar CSS Part 3: Cara Mengatur Margin dan Padding

Selamat datang. Salam jumpa kembali di pertemuan yang ke-4 dalam sesi belajar CSS. Pada pertemuan ini saya akan mengulas tentang Cara Mengatur Margin dan Padding pada CSS.

Margin dan Padding paling banyak digunakan untuk mendesain website dengan menggunakan CSS.

Untuk mengatur sisi dalam dan sisi sebelah luar pada sebuah element, tentunya kita akan menggunakan margin dan padding ini untuk mengaturnya. Nah dalam artikel ini kita akan membahas Apa itu Margin? Apa itu Padding dan bagaimana cara penggunaannya. Simak dibawah ini.

Baca: Cara Mengatur Font Dengan CSS ;


Memahami Margin Pada CSS

Berdasarkan pemahaman pribadi, margin adalah sisi luar sebuah element. Contohnya, misalkan teman – teman ingin memberi jarak antar element, maka bisa menggunakan syntax margin untuk mengaturnya.

Ada beberapa sisi luar margin, yaitu:

  • margin-top : Untuk jarak di sebelah atas
  • margin-bottom : Untuk memberi jarak di sebelah bawah
  • margin-left : Untuk memberi jarak di sebelah kiri
  • margin-right : Untuk memberi jarak di sebelah kanan

Contoh penggunaan margin pada CSS.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Margin CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<div class="box-satu">
		<h1 style="color:black">Contoh Box 1</h1>
	</div>

	<div class="box-dua">
		<h1 style="color:white">Contoh Box 2</h1>
	</div>

</body>
</html>

style.css

.box-satu{
	text-align: center;
	background: Yellow;
	height: 200px;
	width: 300px;
	margin: 20px;
}

.box-dua{
	text-align: center;
	background: red;
	height: 100px;
	width: 200px;
	margin-left: 70px;
}

Hasilnya…

Margin pada CSS - #IRVANGEN
Margin pada CSS – #IRVANGEN

Pada contoh diatas kita sudah mengatur margin

  • margin : 20px; = Margin yang terdapat di kotak biru telah kita atur jarak dari segala sisi sebesar 20 pixel
  • margin-left : 70px; = Disini kita mengatur margin kiri sebesar 70 pixel.

Memahami Padding Pada CSS

Padding merupakan sisi dalam dari sebuah element. Kalau diatas yang sudah kita bahas tadi, adalah margin, sisi luar element. Jangan sampai tertukar ya.

Untuk syntax Padding ini dapat kita gunakan untuk memberi jarak pada sisi dalam dari sebuah element yang sudah kita tentukan. Sama seperti margin yang memiliki 4 sisi, yang terdapat top, bottom, left dan right.

Berikut contoh pengunaan padding pada css.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Padding CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Irvan Gen</h1>
	<div class="box-satu">
		<h1 style="color: black">Contoh box satu</h1>
	</div>

	<div class="box-dua">
		<h1 style="color: white">Contoh box dua</h1>
	</div>

</body>
</html>

style.css

h1{
	text-align: center;
}

.box{
	background: yellow;
	height: 200px;
	width: 300px;
	padding: 20px;
}

.box-dua{
	background: red;
	height: 100px;
	width: 600px;
	padding-left: 70px;
}

Hasilnya…

Padding pada CSS - #IRVANGEN
Padding pada CSS – #IRVANGEN

Sampai disini dulu pembahasan CSS dasar, kita lanjut di pertemuan selanjutnya.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Cara Mengatur Margin dan Padding Pada CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search

  • margin bottom adalah
  • margin dan padding
  • belajar margin
  • padding dan margin
  • css dasar
  • cara margin css
  • cara ketik margins css
  • cara membuat padiing di boostrap
  • width padding html contoh
  • cara membuat margin di html
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *