Trình hiển thị mô hình hộp

Mỗi phần tử HTML được hiển thị dưới dạng một hộp chữ nhật. Mô hình hộp CSS mô tả cách các lớp nội dung, padding, border và margin của phần tử xếp chồng lên nhau để xác định tổng không gian mà phần tử chiếm trên trang. Hiểu mô hình này là điều cần thiết để kiểm soát bố cục và khoảng cách.

Điều chỉnh các giá trị số cho mỗi lớp — margin, border, padding và kích thước nội dung. Nhấp vào một phần lớp để làm nổi bật nó trong sơ đồ. Bản xem trước trực quan cập nhật ngay lập tức và mã CSS tương ứng được tạo ở phía dưới để bạn sao chép.

Margin là khoảng trống trong suốt bên ngoài border ngăn cách phần tử với các phần tử lân cận. Border là đường viền nhìn thấy được bao quanh padding. Padding là khoảng cách giữa border và nội dung thực tế. Content là vùng trong cùng nơi văn bản và các phần tử con hiển thị.

Với content-box (mặc định), width và height được đặt chỉ áp dụng cho vùng nội dung — padding và border được thêm vào bên ngoài. Với border-box, width và height đã bao gồm padding và border, giúp tính toán bố cục trực quan hơn. Hầu hết các dự án hiện đại sử dụng border-box toàn cục.

Sử dụng công cụ trực quan hóa này để thử nghiệm với các giá trị khác nhau và xem mỗi lớp đóng góp thế nào vào tổng kích thước phần tử. Khi một phần tử chiếm nhiều không gian hơn dự kiến, hãy kiểm tra xem giá trị padding hay border có đẩy nó vượt quá chiều rộng mong muốn hay không. Mã CSS được tạo có thể dán trực tiếp vào dự án của bạn.