Spacing — margin and padding · Spasi — margin dan padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Bahasa Indonesia
Ruang antar kotak
- Margin adalah ruang luar dari sebuah kotak — celah menuju tetangganya.
margin: 30px;menambahkan 30 piksel di keempat sisinya, di luar border.- Padding mendorong konten ke dalam; margin mendorong kotak lain menjauh.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Bahasa Indonesia
Satu sisi sekaligus
- Anda dapat memberi jarak hanya satu sisi:
margin-top,margin-right,margin-bottom,margin-left. - Hal yang sama berlaku untuk padding:
padding-left: 10px;, dan seterusnya. margin-bottomdi bawah judul memisahkannya dengan rapi dari teks.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Bahasa Indonesia
Kesalahan umum
- Padding ada di dalam border; margin adalah ruang di luarnya.
box-sizing: border-boxmembuat lebar mencakup padding dan border.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Bahasa Indonesia
Sekarang Anda coba
- Margin adalah celah antar kotak; padding adalah ruang di dalam satu kotak.
- Tambahkan margin di sekeliling sebuah kotak, lalu beri jarak di bawah judul.
Explore · Jelajahi
margin vs padding
Padding is space inside the border; margin is space outside. · Padding adalah ruang di dalam border; margin adalah ruang di luar.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Dorong kotak-kotak itu menjauhi satu sama lain. Tambahkan margin: 30px; ke dalam peraturan .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Tambahkan spasi di bawah judul saja. Tambahkan h1 { margin-bottom: 24px; }.