Introduction to the CSS box model
Khi bố trí một tài liệu, rendering engine của trình duyệt biểu diễn mỗi phần tử như một hộp hình chữ nhật theo CSS basic box model tiêu chuẩn. CSS xác định kích thước, vị trí và các thuộc tính (màu sắc, nền, kích thước border, v.v.) của các hộp này.
Mỗi hộp bao gồm bốn phần (hay vùng), được xác định bởi các cạnh tương ứng của chúng: content edge, padding edge, border edge và margin edge.
Vùng content (content area)
Vùng content, được giới hạn bởi content edge, chứa nội dung "thực" của phần tử, chẳng hạn như văn bản, hình ảnh hoặc trình phát video. Kích thước của nó là content width (hay content-box width) và content height (hay content-box height). Nó thường có màu nền hoặc hình ảnh nền.
Nếu thuộc tính box-sizing được đặt thành content-box (mặc định) và nếu phần tử là block element, kích thước vùng content có thể được xác định rõ ràng bằng các thuộc tính width, min-width, max-width, height, min-height và max-height.
Vùng padding (padding area)
Vùng padding, được giới hạn bởi padding edge, mở rộng vùng content để bao gồm padding của phần tử. Kích thước của nó là padding-box width và padding-box height.
Độ dày của padding được xác định bởi các thuộc tính padding-top, padding-right, padding-bottom, padding-left và thuộc tính viết tắt padding.
Vùng border (border area)
Vùng border, được giới hạn bởi border edge, mở rộng vùng padding để bao gồm các border của phần tử. Kích thước của nó là border-box width và border-box height.
Độ dày của các border được xác định bởi thuộc tính border-width và thuộc tính viết tắt border. Nếu thuộc tính box-sizing được đặt thành border-box, kích thước vùng border có thể được xác định rõ ràng bằng các thuộc tính width, min-width, max-width, height, min-height và max-height. Khi có background (background-color hoặc background-image) được đặt trên một hộp, nó mở rộng đến cạnh ngoài của border (tức là mở rộng xuống dưới border theo thứ tự z). Hành vi mặc định này có thể được thay đổi bằng thuộc tính CSS background-clip.
Vùng margin (margin area)
Vùng margin, được giới hạn bởi margin edge, mở rộng vùng border để bao gồm một vùng trống dùng để tách phần tử khỏi các phần tử lân cận. Kích thước của nó là margin box width và margin box height.
Kích thước của vùng margin được xác định bởi các thuộc tính margin-top, margin-right, margin-bottom, margin-left và thuộc tính viết tắt margin. Khi margin collapsing xảy ra, vùng margin không được xác định rõ ràng vì các margin được chia sẻ giữa các hộp.
Cuối cùng, lưu ý rằng đối với các inline element không phải replaced element, lượng không gian chiếm dụng (đóng góp vào chiều cao của dòng) được xác định bởi thuộc tính line-height, mặc dù các border và padding vẫn được hiển thị xung quanh nội dung.
Xem thêm
- Module CSS box model
- Layout and the containing block
- Introducing the CSS Cascade
- Learn: Handling conflicts
- Các khái niệm CSS cơ bản: