Materi
Setiap elemen di halaman web digambar sebagai kotak persegi. MDN menyebut kotak itu punya empat area yang menumpuk dari dalam ke luar.
- Content: area isi, tempat teks atau gambar berada.
- Padding: ruang di dalam elemen, antara isi dan garis tepi.
- Border: garis tepi elemen.
- Margin: ruang di luar elemen, yang memisahkannya dari elemen lain.
Urutan keempat lapisan itu menentukan warna apa yang terlihat di bagian mana. Warna latar elemen menutupi area isi dan area padding, lalu berhenti di garis tepi; area margin selalu tembus pandang dan memperlihatkan latar elemen induknya. Karena itu kartu putih di atas halaman abu-abu terlihat membesar saat paddingnya ditambah, dan terlihat menjauh dari tetangganya saat marginnya ditambah.
.kartu {
padding: 16px; /* ruang di dalam */
border: 2px solid #7051c4; /* garis tepi */
margin: 24px; /* ruang di luar */
}Nilai padding dan margin boleh ditulis sekaligus untuk empat sisi (padding: 16px), dua angka untuk pasangan atas-bawah lalu kiri-kanan (padding: 12px 20px), atau satu per satu lewat padding-top, padding-right, padding-bottom, dan padding-left. Border punya bentuk per sisi yang sama: border-left, border-top, dan seterusnya.
Kesalahan yang sering muncul: dua paragraf bertumpuk diberi margin-bottom 24px dan margin-top 16px, lalu jarak yang terlihat hanya 24px, bukan 40px. MDN menyebut peristiwa ini penggabungan margin: margin bawah dan margin atas yang bersentuhan secara tegak menyatu menjadi satu, dan yang dipakai adalah nilai terbesar di antara keduanya. Penggabungan hanya terjadi pada margin tegak di aliran normal, dan tidak terjadi di dalam flex container maupun grid container.
