Materi
Browser menggambar setiap elemen sebagai kotak. Kotak itu punya empat lapisan, dari dalam ke luar. Pertama, area isi tempat teks berada. Kedua, padding, yaitu ruang di dalam antara isi dan garis tepi. Ketiga, border, yaitu garis tepinya. Keempat, margin, yaitu ruang di luar yang memisahkan elemen dari tetangganya.
.kartu {
padding: 16px; /* ruang di dalam */
border: 2px solid #7051c4; /* tebal, jenis garis, warna */
margin: 24px; /* ruang di luar */
border-radius: 12px; /* sudut membulat */
}
.kartu p {
margin-bottom: 0.5rem;
}Nilai padding dan margin bisa ditulis sekali untuk keempat sisi, atau per sisi, misalnya padding-top dan margin-bottom. Satuan px adalah satu piksel CSS dengan ukuran tetap. Satuan rem mengacu pada ukuran huruf elemen root, yang di browser desktop umumnya 16 piksel. Jadi 1rem setara 16px. Kelebihan rem: angkanya ikut membesar saat pembaca memperbesar huruf di pengaturan browser. Satuan persen mengacu pada ukuran elemen induk.
Satu hal ini sering mengejutkan. Secara bawaan, width hanya mengatur lebar area isi. Padding dan border ditambahkan di luarnya. Jadi kotak dengan width 300px, padding 16px, dan border 2px memakan 336px di layar. Deklarasi box-sizing dengan nilai border-box mengubah hitungan itu: width menjadi lebar seluruh kotak sampai garis tepi. Menambah padding tidak lagi membuat kotak melebar.
