Model kotak

Beri sebuah kotak width: 200px, padding 16px, dan bingkai 2px, maka secara bawaan kotak itu memakan 236 piksel melintang di layar, bukan 200.

Setiap elemen adalah kotak

Untuk menata halaman, browser mengubah setiap elemen menjadi persegi panjang. Setiap kotak punya empat lapisan, dari dalam ke luar. Area konten memuat teks atau gambar. Padding adalah ruang di dalam kotak, antara konten dan bingkai, dan memakai warna latar kotak. Bingkai (border) adalah garis di sekeliling padding. Margin adalah ruang di luar bingkai yang mendorong kotak lain menjauh; margin selalu transparan. Alat pengembang browser menggambar diagram persis seperti ini saat kamu memeriksa sebuah elemen, lengkap dengan angkanya.

Singkatan untuk empat sisi

padding, margin, dan border-width menerima satu sampai empat nilai, searah jarum jam mulai dari atas. padding: 16px mengatur keempat sisi. padding: 8px 16px mengatur atas dan bawah menjadi 8, kiri dan kanan menjadi 16. padding: 4px 8px 12px 16px mengatur atas, kanan, bawah, dan kiri dengan urutan itu. Setiap sisi juga bisa diatur sendiri, misalnya margin-top. border: 2px solid #333 mengatur lebar, gaya, dan warna sekaligus; tanpa gaya seperti solid atau dashed, bingkai sama sekali tidak digambar.

box-sizing: pengaturan yang diubah hampir semua orang

Secara bawaan, width dan height hanya mengatur ukuran area konten, lalu padding dan bingkai ditambahkan di atasnya. Itulah model content-box, dan model ini membuat tata letak jadi canggung: dua kotak width: 50% yang diberi padding sedikit saja tidak lagi muat berdampingan. Dengan box-sizing: border-box, lebar sudah mencakup padding dan bingkai, dan area konten menyusut untuk memberi ruang. Banyak stylesheet dimulai dengan menerapkannya pada setiap elemen lewat *, *::before, *::after { box-sizing: border-box; }.

Kotak blok dan inline

Perilaku kotak berbeda-beda menurut nilai display-nya. Kotak blok, seperti p, h1, dan section, dimulai di baris baru dan melebar memenuhi lebar wadahnya. Kotak inline, seperti a, strong, dan span, berada di dalam baris teks; width dan height tidak berlaku padanya, dan padding serta margin vertikalnya tidak mendorong baris lain menjauh. display: inline-block berada di tengah-tengah: kotaknya mengalir di dalam baris seperti sebuah kata, tetapi mematuhi lebar, tinggi, dan padding, sehingga cocok untuk label kecil dan tombol.

Margin yang menyatu

Ada satu aturan yang mengejutkan hampir semua orang. Saat margin bawah sebuah blok bertemu margin atas blok berikutnya, keduanya tidak dijumlahkan; yang lebih besar yang menang. Paragraf dengan margin-bottom: 20px yang diikuti judul dengan margin-top: 30px akhirnya berjarak 30 piksel, bukan 50. Ini disebut margin collapsing (penyatuan margin), dan hanya terjadi pada margin vertikal antarblok dalam alur normal, tidak di dalam wadah flex atau grid. Untuk menempatkan blok di tengah secara horizontal, beri ia width atau max-width dan margin: 0 auto: kedua margin samping otomatis membagi ruang kosong sama rata.