Margin
Margin
Margin 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
Margin adalah salah satu topik terpenting dalam CSS.
Margin adalah ruang yang kita buat di sekitar batas suatu elemen.
Penjelasan Sisi Margin
Terlepas dari jenis elemennya, saat membuat margin, kita tidak boleh memikirkannya sebagai 4 arah (atas, kanan, bawah, dan kiri).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Peringatan
Sama seperti memberikan nilai tertentu pada nilai margin, kita juga dapat memberikan nilai persentase.
Peringatan
Selain memberikan nilai tertentu pada margin, kita juga dapat memberikan nilai persentase.
Singkatan margin
Pada contoh sebelumnya, kita harus menulis 4 baris kode untuk memberikan margin pada semua sisi kotak.
CSS menyediakan cara singkat untuk menulis kode margin yang lebih ringkas.
Setelah mendefinisikan properti margin, kita dapat menetapkan nilai margin dengan memisahkannya menggunakan spasi, secara berurutan: atas, kanan, bawah, dan kiri (searah jarum jam).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Peringatan tentang margin negatif
Margin dapat memiliki nilai negatif. Padding yang akan kita pelajari pada pelajaran berikutnya tidak boleh memiliki nilai negatif.
margin auto
Kita akan menggunakan nilai auto pada properti margin untuk menengahkan elemen secara horizontal. Terlepas dari resolusi layar, elemen akan berada di tengah secara horizontal.
Misalkan lebar layar adalah 1200px dan elemen kita berukuran 400px. Elemen kita akan berada di tengah dengan ruang 400px di sisi kiri dan kanannya.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari Margin CSS.
Pada bagian berikutnya, kita akan mempelajari Padding CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Margin” gratis?
Ya — teks lengkap “Margin” 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 “Margin”?
Margin 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 “Margin” 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.