Padding
Padding
Padding adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 1 pelajaran total.
Pendahuluan
Halo,
Selamat datang di pelajaran Padding CSS.
Padding digunakan untuk membuat ruang di dalam batas elemen HTML kita.
Sama seperti margin, kita dapat menambahkan padding 4 arah pada elemen.
Jenis Persentase
Pada contoh sebelumnya, kita menetapkan nilai padding statis dengan satuan px. Sama seperti margin, kita juga dapat menetapkan nilai dalam bentuk persentase.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
Untuk meringkas kode
Sama seperti margin, padding dapat didefinisikan dalam satu baris menggunakan sintaks singkat.
Nilai padding untuk atas, kanan, bawah, dan kiri dapat ditambahkan secara berurutan dengan memisahkannya menggunakan spasi.
Perhatikan contoh kode kita dan Anda akan melihat bahwa cara ini sangat mirip dengan margin.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari Margin CSS.
Pada bagian berikutnya, kita akan mempelajari Warna dan Latar Belakang.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Padding” gratis?
Ya — teks lengkap “Padding” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Padding”?
Padding Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Padding” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.