Mô hình hộp trong CSS
Tất cả các phần tử HTML đều có thể được coi là hộp.
CSS Box model
Trong CSS, thuật ngữ "box model" được sử dụng khi nói về thiết kế và bố cục trang web.
Mô hình hộp CSS về cơ bản là một hộp bao bọc xung quanh mọi phần tử HTML. Nó bao gồm: margin, border, padding và content. Hình ảnh dưới đây minh họa mô hình hộp CSS.
Giải thích các phần khác nhau:
- Content - Nội dung của hộp, nơi chứa văn bản và hình ảnh
- Padding - Một khu vực khoảng trắng xung quanh nội dung, lớp đệm padding trong suốt
- Border - Đường viền bao quanh phần đệm padding và nội dung content
- Margin - Một khu vực khoảng trắng bao quanh bên ngoài đường border.
Mô hình hộp cho phép chúng ta thêm đường viền xung quanh các phần tử và xác định các khoảng không gian giữa các phần tử.
Ví dụ
<style> div { background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } </style>
Chiều rộng và Chiều cao của một phần tử
Để đặt chiều rộng và chiều cao của một phần tử một cách chính xác trong tất cả các trình duyệt, chúng ta cần biết cách hoạt động của mô hình hộp.
Ví dụ Phần tử <div> này sẽ có tổng chiều rộng là 350px
<style> div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } </style>
Phép tính cụ thể như sau:
320px (chiều rộng) + 20px (phần đệm trái + phải) + 10px (đường viền trái + phải) + 0px (lề trái + phải) = 350px
Tổng chiều rộng của một phần tử sẽ được tính như sau:
Tổng chiều rộng phần tử = chiều rộng + phần đệm bên trái + phần đệm bên phải + đường viền trái + đường viền bên phải + lề trái + lề phải
Tổng chiều cao của một phần tử sẽ được tính như sau:
Tổng chiều cao của phần tử = chiều cao + phần đệm trên + phần đệm dưới + đường viền trên + đường viền dưới + lề trên + lề dưới