CSS

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.

Sutiono S.Kom., M.Kom ., M.T.I

Hi, i'm lecturer, technopreneur, investor, businessman, of course an IT Maniac. Have more than 12 years experience in as professional, and 10 years as technopreneur.

Share
Tags: CSS