Padding pada CSS

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

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>

Aku adalah tag p dengan padding

Kamu bisa memberi nilai padding sesuai yang kamu butuhkan.

Memberi padding pada setiap sisi

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

memberi 4 nilai di padding
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>

Aku adalah tag p dengan padding

atau

Aku adalah tag p dengan padding

😲 Info sampingan

Jika konten punya lebar 100% seperti di atas, maka `padding-right` tidak terpakai. Karena konten dimulai dari kiri.

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

Border pada CSS

Margin pada CSS

💅 Edit halaman ini