Home » CSS » CSS Padding: Contoh – Tutorial – Penjelasan

CSS Padding: Contoh – Tutorial – Penjelasan

Properti padding CSS digunakan untuk mengatur ruang di sekitar konten elemen yang berada di element ( bawah, 
kanan atas, kiri ) 

Elemen Padding

CSS Padding mempunyai elemen yaitu :

  • padding-top. Sebagai jarak dalam sebelah atas elemen.
  • padding-right. Sebagai jarak dalam sebelah kanan elemen.
  • padding-bottom. Sebagai jarak dalam sebelah bawah elemen.
  • padding-left. Sebagai jarak dalam sebelah atas kiri.

Semua propeti padding memiliki nilai yaitu :

  • length – menentukan padding dalam bentuk px, pt, cm, dll.
  • % – menentukan padding dalam bentuk % dari lebar elemen.
  • inherit – menentukan padding dari induk tag.

Catatan : Untuk padding ini nilai negatif tidak diperkenankan

Contoh Progam padding berbeda dengan elemen <div> :

<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div {
  border: 1px solid black; 		/*Membuat sebuah border garis*/
  background-color: yellow;		/*background dalam div akan berwarna kuning*/
  padding-top: 40px;    		/*Mengatur jarak elemen atas*/
  padding-right: 20px;			/*Mengatur jarak elemen kanan*/
  padding-bottom: 30px;			/*Mengatur jarak elemen bawah*/
  padding-left: 60px;			/*Mengatur jarak elemen kiri*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Individu Side</h1>
<div>Paragraf dan seterusnya setelah diubah.</div>
  
</body>
</html>

Shorthand Properti

Properti ini untuk mempersingkat kode dengan semua properti jadi 1 properti.

Padding Shorthand mempunyai propeti :

  • padding-top. Sebagai jarak dalam sebelah atas elemen.
  • padding-right. Sebagai jarak dalam sebelah kanan elemen.
  • padding-bottom. Sebagai jarak dalam sebelah bawah elemen.
  • padding-left. Sebagai jarak dalam sebelah atas kiri.

Jika padding memiliki 4 nilai maka syntax dan penjelasannya :

padding: 27px 52px 77px 102px;

  • top padding adalah 27px.
  • right padding adalah 52px.
  • bottom padding adalah 77px.
  • left padding adalah 102px.

Contoh CSS Padding Shorthand

<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div {
  border: 1px solid black;            /*Membuat sebuah border garis*/
  padding: 27px 52px 77px 102px;	  /*top = 27px right = 52px bawah = 77px kiri 102px*/
  background-color: blue;			  /*background dalam border akan berwarna biru*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>4 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
  
</body>
</html>

Jika memiliki 3 nilai maka syntax dan penjelasannya :

padding: 32px 55px 83px;

  • top padding adalah 32px.
  • right and left padding adalah 55px.
  • bottom padding adalah 83px.
<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div {
  border: 1px solid black;            /*Membuat sebuah border garis*/
  padding: 32px 52px 83px;	  /*top = 32px right dan left = 52px bottom = 83px*/
  background-color: blue;			  /*background dalam border akan berwarna biru*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>3 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
  
</body>
</html>

Jika memiliki 2 nilai maka syntax dan penjelasannya :

padding: 32px 55px;

  • top dan bottom padding adalah 32px.
  • right dan left padding adalah 55px.

<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div {
  border: 1px solid black;            /*Membuat sebuah border garis*/
  padding: 32px 52px;				  /*top dan bottom = 32px right dan left = 52px*/
  background-color: blue;			  /*background dalam border akan berwarna biru*/
  }
  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>2 Value</h1>
<p>Paragraf yang telah di ubah stylenya.</p>
  
</body>
</html>


Jika memiliki 1 nilai maka syntax dan penjelasannya :

padding: 30px;

  • Semua padding 4 adalah 30px.
<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div {
  border: 1px solid black;			 /*Membuat sebuah border garis*/
  padding: 30px;					/*4 padding = 30px*/
  background-color: blue;			/*background dalam border akan berwarna biru*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>1 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
  
</body>
</html>

Padding dan Element Width ( box-sizing )

Properti ini digunakan mengatur box model yang artinya bisa membuat box model dalam elemen ini

Contoh ini elemen <div> diberi lebar 300px. Namun, lebar sebenarnya dari elemen <div> adalah 360px 
(300px + 30px bantalan kiri + 30px bantalan kanan) : 
<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div.coba {
  width: 300px;						/*lebar = 300px*/
  background-color: yellow;			/*background dalam div akan menjadi kuning*/
}

div.coba1 {
  width: 300px;						/*lebar = 300px*/
  padding: 30px;					/*4 padding = 25px*/
  background-color: blue;		/*background dalam div akan menjadi biru*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Padding Element Width</h1>
<div class="coba">Paragraf kedua dengan class coba.</div>
<br>

<div class="coba1">Paragraf kedua dengan class coba1.</div>
  
</body>
</html>

Untuk mengatasi lebar pada 300px, tidak peduli jumlah padding, Anda dapat menggunakan properti ukuran kotak ( box-sizing ). Dengan ( box-sizing ) maka akan dibuatkan secara otomatis.

Contoh ini, menggunakan properti ukuran kotak untuk mengatasi 300px :

<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
div.coba1 {
  width: 300px;						/*lebar = 300px*/
  background-color: yellow;			/*background dalam div akan menjadi kuning*/
}

div.coba2 {
  width: 300px;						/*lebar = 300px*/
  padding: 30px;					/*4 padding = 30px*/
  box-sizing: border-box;			/*border-box = akan menjadi border box*/
  background-color: lightblue;		/*background dalam div akan menjadi biru cerah*/
}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Box Border</h1>
<div class="coba">Paragraf kedua dengan class coba.</div>
<br>

<div class="coba1">Paragraf kedua dengan class coba1.</div>
  
</body>
</html>

Semua CSS Padding Properti

PropertiDeskripsi
paddingProperti untuk mempersingkat 4 properti dalam 1 properti.
padding-bottomMengatur padding bagian bawah elemen.
padding-leftMengatur padding kiri suatu elemen.
padding-rightMengatur padding kanan suatu elemen.
padding-topMengatur padding atas suatu elemen.

You may also like