Skip to content Skip to sidebar Skip to footer
Home / Programer / Sharing / TIPS

Belajar padding di css Mudah


pernah dengar istilah padding? atau sudah mengerti apa itu padding? baik untuk kamu yang sudah pernah belajar tentang hal ini, saya anggap kamu sudah paham dan mengerti. Akan tetapi bagaimana jika kamu yang belum memahami mengenai properti css yang satu ini (padding). 

Berikut simak penjelasannya!

Apa itu padding css?

Padding merupakan salah satu properti di css yang digunakan untuk menciptakan ruang/area dalam sebuah elemen.

Maksudnya ialah menciptakan area di sekitar bagian dalam elemen yang terletak diantara konten dan border.

Individual side CSS padding

individual side css padding merupakan properti-properti yang secara individu satu properti mengatur ukuran padding untuk satu sisi yang ada didalam konten tersebut.

Properti berikut mengatur panjang padding di setiap sisi. 

  • padding-top : mengatur area padding di atas elemen 
  • padding-right : mengatur area padding di sisi kanan elemen 
  • padding-bottom mengatur area padding di bagian bawah elemen 
  • padding-left : mengatur area padding pada sisi kiri elemen

Nilai yang digunakan untuk mengatur properti padding adalah: 

  • length merupakan ukuran nilai panjang yang digunakan untuk mengatur padding
  • persentase merupakan ukuran nilai persen untuk mengatur padding 

Contoh:

Berikut adalah contoh pengaturan panjang padding yang berbeda di setiap sisi.


<!DOCTYPE html>
<html>
<head>

   <title> Try It Yourself </title>

   <style type="text/css">

      div {

         padding-top: 30px;

         padding-right: 50px;

         padding-bottom: 70px;

         padding-left: 90px;

         background: lightgrey;

         border: 1px solid red;

      }

   </style>

</head>
<body>

   <div>

      I have a top padding of 30px.

      I have a right padding of 50px.

      I have a bottom padding of 70px.

      I have a left padding of 90px.

   </div>

</body>
</html>

Tidak hanya padding saja yang mempunyai masing-masing properti untuk mengatur tiap sisi pada konten atau elemen. Border dan margin-pun juga demikian yaitu memiliki individual side property.

Kalau satu properti untuk mengatur satu sisi saja seperti diatas merupakan cara yang tidak efisien untuk kita lakukan karena selain kita harus mensetting masing-masing tiap sisi padding, akan tetapi juga mengakibatkan kita menulis banyak kode.

Bagaimana alternatifnya agar pengaturan padding diatas dapat menjadi lebih efektif lagi? ok, untuk cara lainnya adalah kita menggunakan singkatan properti saja yaitu shorthand properti istilah kerennya. 

Berikut penjelasannya:

Shorthand property padding CSS

Properti CSS padding adalah yang menjadi shorthand atau singkatan untuk properti berikut:

  • padding-top
  • padding-bottom
  • padding-right
  • padding-left

Properti CSS padding dapat memiliki satu, dua, tiga atau empat nilai.

  • Ketika satu nilai ditentukan, itu menerapkan padding yang sama ke keempat sisinya.
  • Ketika dua nilai ditentukan, nilai pertama berlaku untuk bagian atas dan bawah, yang kedua ke kiri dan kanan.
  • Ketika tiga nilai ditentukan, nilai pertama berlaku ke atas, yang kedua ke kiri dan kanan, yang ketiga ke bawah.
  • Ketika empat nilai ditentukan, bantalan diterapkan ke atas, kanan, bawah, dan kiri secara berurutan (searah jarum jam).

Contoh:


/* one value */

#element1 { padding : 20px; }

/* two values */ 

#element2 { padding: 10px 20px; }

/* three values */ 

#element3 { padding: 20px 1 0px 20px; } 

/* four values */ 

#element4 { padding: 10px 20px 30px 40px; }

Padding dan width

Properti lebar(width) CSS hanya menentukan lebar area konten elemen. Itu tidak termasuk padding, border dan margin.

Oleh karena itu, jika suatu elemen memiliki lebar dan padding tertentu,yang terjadi maka akan ditambahkan bersama-sama.

Contoh:


<!DOCTYPE html>
<html>
<head>

   <title> Try It Yourself </title>

   <style type="text/css">

      div {

         width: 200px;

         padding: 10px;

         /* the actual rendered width of the element is now 220px */

         background: blue;

         height: 100px;

      }

   </style>

</head>
<body>

   <div></div>

   <p> The actual rendered width of the element is now 220px. </p>

   <p> Because <b>200px</b> (element's content area width) + <b>10px</b> (left padding) + <b>10px</b> (right padding) = <b>220px</b>. </p>

</body>
</html>

Untuk menjaga lebar pada 200px kita perlu mengatur properti box-sizing ke border-box.

Meningkatkan padding sekarang akan mengurangi ruang konten di dalam elemen. Contoh:


<!DOCTYPE html>
<html>
<head>

   <title> Try It Yourself </title>

   <style type="text/css">

      div {

         width: 200px;

         padding: 10px;

         box-sizing: border-box;

         /* the actual rendered width of the element is still 200px */

         background: blue;

         height: 100px;

      }

   </style>

</head>
<body>

   <div></div>

   <p> The actual rendered width of the element is still 200px. </p>

   <p> Because of the <b>box-sizing: border-box</b> CSS declaration the padding no longer increases the actual width of the element instead it decreases the content space/area inside. </p>

</body>
</html>

Padding dan height

Properti tinggi(height) CSS hanya dapat menentukan ketinggian area konten elemen. Itu tidak termasuk padding, border dan margin.

Oleh karena itu, jika suatu elemen memiliki ketinggian dan padding tertentu, maka hasilnya ukuran height(tinggi) akan ditambah nilainya dengan ukuran padding.

Contoh:


<!DOCTYPE html>
<html>
<head>

   <title> Try It Yourself </title>

   <style type="text/css">

      div {

         height: 200px;

         padding: 10px;

         /* the actual rendered height of the element is now 220px */

         background: blue;

         width: 100px;

      }

   </style>

</head>
<body>

   <div></div>

   <p> The actual rendered height of the element is now 220px. </p>

   <p> Because <b>200px</b> (element's content area height) + <b>10px</b> (top padding) + <b>10px</b> (bottom padding) = <b>220px</b>. </p>

</body>
</html>

Untuk menjaga ketinggian pada 200px kita perlu mengatur properti box-sizing ke border-box.

Meningkatkan padding sekarang akan mengurangi ruang konten di dalam elemen. Contoh:


<!DOCTYPE html>
<html>
<head>

   <title> Try It Yourself </title>

   <style type="text/css">

      div {

         height: 200px;

         padding: 10px;

         box-sizing: border-box;

         /* the actual rendered height of the element is still 200px */

         background: blue;

         width: 100px;

      }

   </style>

</head>
<body>

   <div></div>

   <p> The actual rendered height of the element is still 200px. </p>

   <p> Because of the <b>box-sizing: border-box</b> CSS declaration the padding no longer increases the actual height of the element instead it decreases the content space/area inside. </p>

</body>
</html>

Ok cukup sekian penjelasan saya tentang padding css, saran saya agar kamu lebih paham coba praktekan kodingan diatas dan lihat sendiri apa yang terjadi maka kamu akan lebih memahami lagi.

Jika kamu punya saran atau pendapat serta pertanyaan boleh komentar dibawah artikel ini. Terimakasih