Padding Adalah dan Cara Menggunakannya Dalam CSS

padding adalah dan cara menggunakanya

Padding adalah sebuah ruang yang terletak diantara konten dengan border. Sehingga, dengan adanya ruang tersebut, konten tidak bertumpukan dengan batas tepi yang terdapat pada website. Tanpa adanya padding, tampilan website akan sangat tidak bagus dan terkesan berantakan.  Pengertian padding sendiri memiliki banyak macamnya. Tergantung individu yang mengartikannya. Pada dasarnya, pengertian padding adalah jarak kosong diantara elemen dan border. Nah, untuk lebih jelasnya anda bisa melihat gambar dibawah ini.

padding adalah dan cara menggunakanya

Padding Adalah

Setelah melihat ilustrasi penerapan padding seperti gambar diatas sudah memiliki gambaran ? Terlihat jelas bahwa penggunaan padding pada halaman website akan membuat tampilan menjadi lebih rapi. Antara border dan konten tidak saling bertabrakan. Lalu bagaimana cara menggunakannya dihalaman website ? berikut adalah langkah – langkahnya.

Cara Menggunakan Padding di Halaman Website

Seperti yang diketahui bahwa padding adalah ruang kosong yang memberikan jarak antara konten dan border pada sebuah halaman HTML di CSS. Sehingga, penulisan padding menggunakan satuan pixel (px) dan disesuaikan dengan seberapa besar space yang ingin anda gunakan. Sebagai contoh :

<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar Padding Optimalkan</title>
<style>
.tanpa-padding {
border: 2px solid blue;
}
.dengan-padding {
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<p class=”tanpa-padding”>
Padding adalah sebuah jarak kosong yang memisahkan antara konten dan border.
Dengan adanya padding, membuat tampilan website menjadi lebih rapi dan tertata.
Menggunakan padding dalam halaman HTML sangan mudah. Ini adalah contonya.
Blog Optimalkan.com
</p>
<p class=”dengan-padding”>
Padding adalah sebuah jarak kosong yang memisahkan antara konten dan border.
Dengan adanya padding, membuat tampilan website menjadi lebih rapi dan tertata.
Menggunakan padding dalam halaman HTML sangan mudah. Ini adalah contonya.
Blog Optimalkan.com
</p>
</body>
</html>

Padding Adalah

Diatas merupakan contoh kode padding yang digunakan dalam halaman HTML pada bagian CSS. Terlihat bahwa pada paragraf pertama konten atau artikel menempel di border yang berwarna biru. Sedangkan di paragraf kedua saya memberikan padding sebesar 10px untuk sisi kanan, kiri atas dan bawah. Sehingga tampilannya lebih rapi dan enak dibaca.

Cara Penulisan Padding Yang Benar

Selain itu, menulis padding juga ada beberapa caranya. Untuk contoh diatas, saya menyamakan padding kanan, kiri, atas dan bawah sebesar 10px maka cara penulisaanya seperti itu. Lalu, bagaimana jika anda ingin mengcustom padding pada halaman HTML yang anda miliki ? Bisa saja berikut cara penulisannya :

Penulisan Padding: 10px memiliki arti

  • Padding-top: 10px
  • Padding-right: 10px
  • Padding-bottom: 10px
  • Padding-left: 10px

Penulisan Padding: 8px 5px memiliki arti

  • Padding-top: 8px
  • Padding-right: 5px
  • Padding-bottom: 8px
  • Padding-left: 5px

Penulisan Padding: 8px 5px 3px memiliki arti

  • Padding-top: 8px
  • Padding-right: 5px
  • Padding-bottom: 3px
  • Padding-left: 3px

Penulisan Padding: 8px 5px 3px 2px memiliki arti

  • Padding-top: 8px
  • Padding-right: 5px
  • Padding-bottom: 3px
  • Padding-left: 2px

Bagaimana ? Mudah dimengerti bukan cara penulisan padding. Dalam dunia padding, cara penulisan diatas disebut dengan Shorthand Notation. Jika bingung, urutan penulisan padding sesuai dengan arah jarum jam. Jadi atas, kanan, bawah dan kiri.

Demikian ulasan mengenai Pengertian Padding Adalah dan Cara Menerapkannya di dalam CSS. Jika mengalami kebingungan, bisa berkomentar diatas untuk saya bantu menjelaskan.

Facebook Comments

Recommended For You

About the Author: Optimalkan.com

Hanya seorang yang menyukai dunia teknologi dan aktif menulis di Optimalkan.com