Kiến thức cơ bản về CSS box model

Khi dựng giao diện của một trang web, theo lý thuyết chuẩn của CSS box model, engine của trình duyệt thể hiện các element trên trang web dưới dạng một hình chữ nhật. CSS sẽ giúp định nghĩa các thuộc tính như kích thước, vị trí và các thuộc tính khác (màu sắc, màu nền, kích thước của border...) của các element này.

Mỗi element được cấu tạo bởi bốn phần (vùng), các phần này được xác định thông qua các cạnh (đường biên) tương ứng: cạnh ngoài vùng nội dung (content edge), cạnh ngoài vùng padding (padding edge), cạnh ngoài vùng border (border edge), và cạnh ngoài vùng margin (margin edge).

CSS Box model

Vùng nội dung, được bọc bởi các cạnh ngoài (content edge), là nơi chứa nội dung chính của element như văn bản, hình ảnh, hoặc video. Các thông số về kích thước của vùng này gồm chiều rộng (content width) và chiều cao (content height). Vùng này thường có cả màu nền hoặc ảnh nền.

Nếu thuộc tính box-sizing được gán giá trị content-box (mặc định) và nếu element này có kiểu hiển thị block, thì kích thước của vùng nội dung có thể được định nghĩa bởi các thông số thuộc tính width, min-width, max-width, height, min-height, và max-height.

Vùng padding, được bọc bởi các cạnh ngoài (padding edge), bọc lấy bên ngoài vùng nội dung bằng padding của element. Các thông số kích thước của vùng này gồm chiều rộng (padding-box width) và chiều cao (padding-box height).

Độ dày của padding được xác định dựa trên các thuộc tính padding-top, padding-right, padding-bottom, padding-left, hay viết tắt là padding.

Vùng border, được bọc bởi các cạnh ngoài (border edge), bọc lấy bên ngoài vùng padding bằng border của element. Các thông số kích thước của vùng này gồm chiều rộng (border-box width) và chiều cao (border-box height);

Độ dày của border được xác định dựa trên thuộc tính border-width. Nếu thuộc tính box-sizing được gán giá trị border-box, thì kích thước của vùng border có thể được định nghĩa bởi các thông số thuộc tính width, min-width, max-width, height, min-height, và max-height. Nếu element có background bằng cách gán thuộc tính (background-color hoặc background-image),  thì background sẽ tràn ra cả vùng border. Bạn có thể thay đổi trạng thái mặc định này bằng cách sử dụng kèm thuộc tính background-clip.

Vùng margin, được bọc bởi các cạnh ngoài (margn edge), bọc lấy bên ngoài vùng border và tạo ra một vùng trống để giãn cách vị trí của element này với các element khác xung quanh. Các thông số kích thước của vùng này gồm chiều rộng (margin-box width) và chiều cao (margin-box height);

Kích thước của vùng margin được xác định dựa trên các thuộc tính  margin-top, margin-right, margin-bottom, margin-left, hay viết tắt là  margin. Khi có sự xung đột margin xảy ra (margin collapsing), sẽ khó xác định chính xác vùng margin của một element vì nó được chia sẻ cho các element với nhau.

Cuối cùng, lưu ý với một elements với thuộc tính hiển thị là inline (inline element), thì khoảng không gian mà nó chiếm dụng (chiều cao) được xác định bởi thuộc tính line-height, dù cho nó có các thuộc tính border hay padding thêm vào.

Tham khảo thêm

Đặc tả kĩ thuật

Đặc tả kĩ thuật Trạng thái Ghi chú
CSS Basic Box Model Working Draft
CSS Level 2 (Revision 1) Recommendation Chỉnh sửa từ ngữ chính xác hơn, không có thay đổi gì về quan trọng.
CSS Level 1 Recommendation Các định nghĩa ban đầu.

Tham khảo thêm