Belajar Koding HTML & CSS Bagian 16: Belajar Membuat Ukuran Padding CSS
.png)
Padding dalam CSS adalah ruang
kosong di dalam elemen HTML yang terletak antara konten dan batas (border)
elemen tersebut. Fungsinya adalah untuk memberikan jarak agar konten tidak
menempel langsung pada tepi elemen, sehingga tampilan menjadi lebih rapi dan
nyaman dilihat.
📚 Cara Mengatur Padding di CSS
CSS menyediakan beberapa cara untuk
mengatur padding:
- Properti
Individual
Digunakan untuk mengatur padding secara spesifik pada setiap sisi elemen:
padding-top: 20px; /*
atas */
padding-right: 15px; /*
kanan */
padding-bottom: 10px; /* bawah */
padding-left: 5px; /*
kiri */
Metode
ini memberikan kontrol penuh terhadap setiap sisi, namun bisa membuat kode
menjadi lebih panjang.
- Properti
Shorthand
Digunakan untuk menyingkat penulisan padding:
padding: 20px;
/* semua sisi */
padding: 20px 10px;
/* atas & bawah | kanan
& kiri */
padding: 20px 15px 10px;
/* atas | kanan & kiri | bawah */
padding: 20px 15px 10px 5px; /* atas | kanan | bawah | kiri
*/
Urutan
nilai mengikuti arah jarum jam: atas, kanan, bawah, kiri.
🧪 Contoh Penggunaan Padding
Berikut contoh sederhana penggunaan
padding dalam HTML dan CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.kotak {
background-color:
lightblue;
border: 2px
solid navy;
padding: 20px;
}
</style>
</head>
<body>
<div class="kotak">
Ini adalah contoh
teks dengan padding 20px di semua sisi.
</div>
</body>
</html>
Tampilan Hasil (Output) Margin Collapse Antara Elemen Sibling
Dalam contoh di atas, elemen <div> dengan kelas kotak memiliki padding sebesar 20px di semua sisi, memberikan ruang antara teks dan batas elemen
🧭 Perbedaan Padding dan Margin
|
Properti |
Lokasi
Ruang |
Fungsi
Utama |
|
Padding |
Di dalam elemen |
Memberikan jarak antara konten dan
batas elemen |
|
Margin |
Di luar elemen |
Memberikan jarak antara elemen
dengan elemen lain |
Padding
mempengaruhi ruang di dalam elemen, sedangkan margin mempengaruhi ruang di luar
elemen.
0 Response to "Belajar Koding HTML & CSS Bagian 16: Belajar Membuat Ukuran Padding CSS"
Post a Comment