The box model · Model kotak
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Bahasa Indonesia
Setiap kotak memiliki lapisan
- CSS memperlakukan setiap elemen sebagai kotak.
- Konten adalah teks atau gambar Anda. Padding adalah ruang di dalam, di sekitar konten.
- Border adalah garis di sekitar padding. Margin adalah ruang luar, yang mendorong kotak lain menjauh.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Bahasa Indonesia
Padding dan border
padding: 20px;menambahkan 20 piksel ruang di dalam, di keempat sisinya.border: 2px solid black;menggambar sebuah garis — lebar, gaya, lalu warna-nya.- Padding membuat sebuah kotak terasa luas; border membuatnya menonjol.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Bahasa Indonesia
Kesalahan umum
- Model kotak adalah konten, kemudian padding, lalu border, dan terakhir margin (dari dalam ke luar).
- Padding menambahkan ruang di dalam border.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Bahasa Indonesia
Sekarang Anda coba
- Padding berada di dalam; border mengelilinginya.
- Tambahkan padding pada sebuah kotak, lalu tambahkan border.
Explore · Jelajahi
The CSS box model · Model kotak CSS
Every box is content + padding + border + margin around it. · Setiap kotak adalah konten + padding + border + margin di sekelilingnya.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Berikan kotak ruang bernafas di dalamnya. Tambahkan padding: 20px; ke dalam peraturan .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Lukis garisan di sekeliling kotak. Tambahkan border: 2px solid navy; ke dalam peraturan .box — kekalkan tiga bahagian itu mengikut urutan tersebut: lebar, gaya, warna.