PADDING PADA CSS

Padding pada CSS adalah jarak antara garis batas (border) dengan elemennya

Berikut visualnya:

Contoh padding pada CSS

Sekarang kita coba memberi jarak antara konten HTML dengan garis bordernya lewat properti border.

<style>
.padding {
 border: 1px solid white;
 padding: 5px;
}
</style>

<p class="padding">Aku adalah tag p dengan border </p>

Kamu bisa memberi nilai padding sesuai yang kamu butuhkan.

Memberi padding pada setiap sisi

Setiap sisi, bisa mempunyai padding yang berbeda. Ada dua cara:

1. memberi 4 nilai di padding
2. memberi properti detail padding-(arah)

<style>
.padding-all {
 border: 1px solid violet;
 padding: 10px 5px 2px 20px;
}
.padding-each {
 border: 1px solid white;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 15px;
 padding-left: 25px;
}
</style>

<p class="padding-all">Aku adalah tag p dengan padding </p>
atau
<p class="padding-each">Aku adalah tag p dengan padding </p>

Nilai satuan padding

Padding bisa punya nilai absolut px seperti yang kita lihat. Atau opsi lain:

- satuan solid lain seperti px, pt, cm, dll..
- Presentasi dari lebar elemen pembungkusnya. Contoh -> padding :10%;
- inherit : mengambil nilai dari pembungkusnya