Memahami Lebar, Tinggi, Margin, dan Padding
Pelajari cara width, height, margin, dan padding menentukan dimensi serta jarak elemen.
Memahami Lebar, Tinggi, Margin, dan Padding adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Konsep Model Kotak
Setiap elemen HTML ditampilkan sebagai kotak persegi panjang. Model kotak CSS menjelaskan empat lapisan yang menyusun kotak ini dari dalam ke luar: konten → padding → border → margin.
width dan height
width dan height menetapkan dimensi area konten. Secara default, padding dan border ditambahkan di luar ukuran ini.
<div class="box"></div>
padding
padding adalah ruang transparan di dalam border, di antara konten dan tepi border. Ruang ini merupakan bagian dari area elemen yang dapat diklik dan dicat sebagai latar belakang.
<div class="card">Card content</div>
Bentuk Panjang Padding
Setiap sisi dapat ditetapkan secara terpisah:
<div class="element">Padded element</div>
margin
margin adalah ruang transparan di luar border. Margin mendorong elemen lain menjauh. Margin negatif menarik elemen lebih dekat atau membuatnya saling tumpang tindih.
<div class="section">Centered section with bottom margin</div>
Margin yang Menyusut
Margin vertikal menyusut di antara elemen blok yang berdekatan: celah sebenarnya adalah nilai yang lebih besar dari kedua margin, bukan jumlah keduanya. Margin horizontal tidak pernah menyusut.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Mencegah Margin Menyusut
Penyusutan margin dicegah ketika:
- Elemen merupakan anak flex atau grid
- Elemen induk memiliki
overflow: hidden - Elemen induk memiliki
paddingdi antara induk dan anak pertama - Elemen sebaris memisahkan elemen-elemen yang bersaudara
Margin auto
Menetapkan margin horizontal ke auto pada elemen blok dengan lebar tetap akan membuatnya berada di tengah wadah. Ini adalah teknik klasik untuk memusatkan elemen.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Batasi dimensi dengan batas minimum dan maksimum agar elemen tetap mudah dibaca pada berbagai ukuran layar:
<div class="content">Readable content column capped at 65 characters wide.</div>
Menghitung Ukuran Total Elemen
Dalam model content-box default, lebar total = width + padding-left + padding-right + border-left + border-right. Hal ini dapat mengejutkan dan menjadi alasan border-box lebih disukai.
Properti Margin dan Padding Logis
CSS modern menyediakan padanan logis: margin-block, margin-inline, padding-block-start, dan sebagainya. Properti ini menyesuaikan diri dengan arah penulisan secara otomatis.
<div class="card">Logical padding-block/inline</div>
Pemeriksaan Singkat
Lapisan mana saja yang termasuk dalam lebar total elemen blok yang ditampilkan pada model kotak default?
Ringkasan
Lapisan model kotak adalah konten, padding, border, dan margin. Padding berada di dalam border; margin berada di luar. Margin vertikal menyusut di antara elemen bersaudara yang berdekatan. Gunakan margin: 0 auto dengan lebar tetap untuk memusatkan elemen blok.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Memahami Lebar, Tinggi, Margin, dan Padding” gratis?
Ya — teks lengkap “Memahami Lebar, Tinggi, Margin, dan Padding” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Memahami Lebar, Tinggi, Margin, dan Padding”?
Pelajari cara width, height, margin, dan padding menentukan dimensi serta jarak elemen. Kamu berlatih CSS Academy 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 CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy 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 4.
Berapa lama pelajaran “Memahami Lebar, Tinggi, Margin, dan 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 CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Memahami Lebar, Tinggi, Margin, dan Padding
- Gaya, Lebar, dan Warna Batas
- Ukuran Kotak: Content-Box vs Border-Box
- Outline dan Box-Shadow