Mô hình hộp CSS là gì?
Còn gọi: box model, css box model, mô hình hộp, box-sizing, border-box
Box model là cách CSS coi mọi phần tử trên trang là một chiếc hộp gồm bốn lớp từ trong ra ngoài: nội dung (content), khoảng đệm (padding), viền (border) và lề ngoài (margin).
Hiểu kỹ hơn
Hiểu box model giúp designer nói cùng ngôn ngữ với developer khi bàn về khoảng cách. Padding là khoảng trống bên trong viền, có màu nền của phần tử; margin là khoảng trống bên ngoài, đẩy các phần tử khác ra xa. Một điểm hay gây nhầm: theo mặc định, chiều rộng khai báo chỉ tính phần nội dung, padding và border cộng thêm ra ngoài. Vì vậy hầu hết dự án hiện nay đặt box-sizing: border-box để chiều rộng bao gồm cả padding và border, khớp với cách Figma tính kích thước frame. Công cụ Inspect của trình duyệt (chuột phải, Kiểm tra) hiển thị sơ đồ box model của từng phần tử, rất hữu ích khi làm design QA để so khoảng cách thực tế với bản thiết kế.
