A. Penadahuluan
Hallo kawan saya akan menjelasakan tentang padding pada css.
B. Pengertian
Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar. Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan.
C. Maksud dan Tujuan
Untuk mendeklarasikan padding-top, padding-kanan, padding-bottom, padding-kiri secara serentak (sekaligus) dalam satu baris.
D. Pembahasan
Padding (dalam pengertian CSS) adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar. Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan.
Padding juga dapat dipahami sebagai "filling". Karena padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi/border dan isi dari elemen.
CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:
1). padding-top
2). padding-kanan
3). padding-bottom
4). padding-kiri
Semua properti padding dapat memiliki nilai berikut:
1). panjang - menentukan padding pada px, pt, cm, dll.
2). % - menentukan padding dalam% dari lebar elemen yang mengandung
3). mewarisi - menentukan bahwa padding harus diwarisi dari elemen induk
Catatan: Nilai negatif tidak diperbolehkan.
Contoh script CSS Padding - Sisi Individu :
1). kalian ketik script dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Menggunakan properti padding individu</h2>
<div>Unsur div ini memiliki padding atas 50px, padding kanan 30px, padding bawah 50px, dan padding kiri 80px.</div>
</body>
</html>
2). Kemudian save, setelah itu buka file yang anda simpan tadi.
Ini adalah contoh hasil script Padding - Sisi Individu :
Ini adalah contoh hasil script Padding - Sisi Individu :
Contoh script CSS Padding dan lebar elemen:
1). Kalian ketik script dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding dan lebar elemen</h2>
<div class="ex1">Div ini berukuran 300px.</div>
<br>
<div class="ex2">Lebar div ini adalah 350px, meskipun didefinisikan sebagai 300px pada CSS.</div>
</body>
</html>
1). Kalian ketik script dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding dan lebar elemen</h2>
<div class="ex1">Div ini berukuran 300px.</div>
<br>
<div class="ex2">Lebar div ini adalah 350px, meskipun didefinisikan sebagai 300px pada CSS.</div>
</body>
</html>
3). Kemudian save, setelah itu buka file yang anda simpan tadi. Ini adalah contoh hasil script Padding dan lebar elemen:
E. Masalah yang Ditemukan
Kurang paham tentang fungsi dari script div.ex
F. Hasil yang Didapat
Memahami pengertian CSS Padding, fungsi dan script Padding CSS.
G. Hasil Kesimpulan
Dengan padding, kita bisa mengatur posisi elemen agar memiliki ruang lebih luas atau lebih sempit dalam lingkup konten elemen itu sendiri.
H. Penutup
Semoga bermanfaat!!!!!!!!!
I. Referensi
No comments:
Post a Comment