Assalamu'alaikum Wr. Wb.
A). Pendahuluan
Bertemu lagi diblog saya. Pada postingan ini kita akan membahas mengenai Padding CSS ,
Apa itu Padding? Kegunaanya apa? akan kita bahas di postingan kali ini...
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.
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.
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>
<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 :
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>
<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>
2). 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). Referensi
https://www.w3schools.com/css/css_padding.asp
Cukup sekian informasi yang dapat saya berikan pada hari ini, jika ada
kesalahan mohon maaf semuanya. Terimakasih telah mengunjungi blog saya
dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog
saya yang saat ini masih biasa-biasa saja.
~ Wassalamu'alaikum Wr. Wb. ~
Postingan
Tidak ada komentar:
Posting Komentar