Mô hình hộp CSS
Tất cả các phần tử HTML có thể được coi là các hộp.
Mô hình hộp CSS
Trong CSS, thuật ngữ "mô hình hộp" được sử dụng khi nói về thiết kế và bố cục.
Mô hình hộp CSS về cơ bản là một hộp bao quanh mọi phần tử HTML. Nó bao gồm: nội dung, phần đệm, đường viền và lề. Hình ảnh dưới đây minh họa mô hình hộp:
Giải thích các phần khác nhau:
- Nội dung - Nội dung của hộp, nơi văn bản và hình ảnh xuất hiện
- Đệm - Xóa một khu vực xung quanh nội dung. Phần đệm trong suốt
- Đường viền - Đường viền bao quanh phần đệm và nội dung
- Margin - Xóa một khu vực bên ngoài đường viền. Lề trong suốt
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 khoảng cách giữa các phần tử.
Ví dụ
Trình diễn mô hình hộp:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
Hãy tự mình thử » Chiều rộng và chiều cao của một phần tử
Để đặt chính xác chiều rộng và chiều cao của một phần tử trong tất cả các trình duyệt, bạn cần biết mô hình hộp hoạt động như thế nào.
Quan trọng: Khi bạn đặt thuộc tính chiều rộng và chiều cao của một phần tử bằng CSS, bạn chỉ cần đặt chiều rộng và chiều cao của vùng nội dung . Để tính tổng chiều rộng và chiều cao của một phần tử, bạn cũng phải bao gồm phần đệm và đường viền.
Ví dụ
Phần tử <div> này sẽ có tổng chiều rộng là 350px và tổng chiều cao là 80px:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Hãy tự mình thử » Đây là tính toán:
Tổng chiều rộng của một phần tử phải được tính như sau:
Tổng chiều rộng phần tử = chiều rộng + đệm trái + đệm phải + viền trái + viền phải
Tổng chiều cao của một phần tử phải đượ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 + viền trên + viền dưới
Lưu ý: Thuộc tính lề cũng ảnh hưởng đến tổng không gian mà hộp sẽ chiếm trên trang, nhưng lề không được bao gồm trong kích thước thực của hộp. Tổng chiều rộng và chiều cao của hộp dừng ở đường viền.