Pengertian Padding dan Fungsi Padding dalam CSS – Tutorial CSS

Padding CSS

Padding adalah jarak anda konten dengan garis pinggirnya (border).
Properti padding akan memberikan spasi antara konten dengan garis, jika tanpa padding konten akan terlalu rapat ke tepi garis.

Untuk lebih jelas perhatikan gambar dibawah ini.

membuat padding css
membuat padding css

Dari gambar diatas bisa kita lihat bahwa padding berada tepat diluar konten.
Semakin besar nilai padding maka semakin jauh jarak konten dengan border.

Pentuan nilai dan satuan nilai padding

Padding pada css bisa kita tentukan nilainya secara masing-masing sisi ataupun secara keseluruh.

Penentuan nilai padding sama seperti penentuan nilai properti margin css.

Satuan nilai padding bisa memakai px, pt, cm dll Bisa juga memakai persen dan inherit.

Contoh padding css

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border: 1px solid red;
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Menggunakan Individu padding:</h2>

<p>Tulisan paragraf ini tanpa padding.</p>
<p class="one">Paragraf ini memakai padding dengan nilai bottom padding 50px, 
a left padding 80px, dan right padding 30px.</p>

</body>
</html>

Dalam contoh diatas saya membuat nilai padding

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

Bisa kita lihat bahwa padding ini berfungsi untuk membuat jarak text/konten ke baris, semakin besar nilainya maka semakin jauh text dari border.

Padding – Shorthand Properti

Sama seperti properti margin yang memiliki shorthand, padding juga memiliki properti shorthand.

Seperti yang kita ketahui bahwa shorthand digunakan untuk mempersingkat penulisan kode css.

Berikut ini adalah contoh padding shorthand

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border: 1px solid red;
background-color: yellow;
padding: 50px 30px 50px 80px;
}
</style>
</head>
<body>

<h2>Padding ini menggunakan Properti Shorthand:</h2>

<p>Tulisan paragraf ini tanpa padding.</p>
<p class="one">Paragraf ini memakai padding dengan nilai bottom padding 50px, 
a left padding 80px, dan right padding 30px.</p>

</body>
</html>

Dengan properti shorthand ini kita tidak perlu membuat properti top, bottom, right dan left.
Kita hanya perlu membuat satu properti untuk menentukan nilai setiap sisi.

Perhatikan penentuan nilai properti shorthand berikut ini

padding: 25px 50px 75px 100px;

Artinya:

padding atas adalah 25px
padding kanan adalah 50px
padding bawah adalah 75px
padding kiri adalah 100px

Jika kita menentukan nilainya hanya untuk 3 sisi saja contohnya sebagai berikut

padding: 25px 50px 75px;

Artinya:

padding atas adalah 25px
padding kanan dan kiri 50px
padding bawah adalah 75px

Jika kita hanya menentukan 2 sisi saja seperti berikut ini
padding: 25px 50px;

Artinya

padding Atas dan bawah 25px
padding kanan dan kiri 50px

Dan yang terakhir
padding: 25px;

Artinya semua sisi baik atas, kanan, bawah, kiri akan memiliki jarak 25px.

Contoh padding tanpa border

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
padding: 2cm;
}

p.ex2 {
padding: 0.5cm 3cm;
}
</style>
</head>
<body>

<p class="ex1">Teks ini memiliki padding yang sama disetiap sisinya. nilai paddingnya adalah
2cm.</p>
<p class="ex2">Teks ini memiliki padding top dan bottom 0.5cm 
dan padding left and right 3cm.</p>

</body>
</html>

Padding kiri

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 50%;
}
</style>
</head>
<body>

<p>Ini contoh teks tanpa padding kiri (left)</p>
<p class="padding">Teks ini memiliki padding kiri 2 cm.</p>
<p class="padding2">Teks ini memiliki padding kiri 50%.</p>

</body>
</html>

Padding kanan

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
}

p.padding2 {
padding-right: 50%;
}
</style>
</head>
<body>

<p>Ini contoh teks tanpa padding kanan. Ini adalah teks tanpa padding right.
ini adalah teks tanpa padding kanan.</p>
<p class="padding">teks ini memiliki right padding 2 cm. teks ini memiliki right padding 2 cm.
teks ini memiliki right padding 2 cm.</p>
<p class="padding2">Teks ini memiliki right padding 50%. Teks ini memiliki right padding 50%.
 Teks ini memiliki right padding 50%.</p>

</body>
</html>

Padding Atas

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}

p.padding2 {
padding-top: 50%;
}
</style>
</head>
<body>

<p>This is a text with no top padding. This is a text with no top padding. This is a text 
with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm.
 This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. 
This text has a top padding of 50%.</p>

</body>


</html>

Padding bawah

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
}

p.padding2 {
padding-bottom:50%;
}
</style>
</head>
<body>

<p>This is a text with no bottom padding. This is a text with no bottom padding. 
This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. 
This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. 
This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

Dengan semua 7 contoh padding diatas saya yakin anda sudah dapat memahami apa itu padding dan juga sudah mengetahui fungsi padding itu.

Sekian tutorial padding css ini semoga bermanfaat. baca juga tutorial membuat margin dengan css

Keyword:

  • padding css pungsinya

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas