Trong bài viết này, chúng ta sẽ tìm hiểu về Mô hình hộp trong CSS. Tất cả các phần tử HTML có thể được xem như các hộp (box). Trong CSS, thuật ngữ “mô hình hộp” (box model) được sử dụng khi nói về thiết kế và bố cục.
Mô hình hộp trong CSS
Mô hình hộp trong CSS chủ yếu là một hộp, cái dùng để bao bọc xung quanh mọi phần tử HTML. Nó bao gồm: margin, border, padding, và nội dung thực tế.
Hình dưới đây minh hoạ về mô hình hộp:
Giải thích về các thành phần khác nhau:
- Content – nội dung của hộp, nơi xuất hiện văn bản và hình ảnh.
- Padding – khoảng cách giữa nội dung và đường viền (border). Padding là trong suốt.
- Border – đường viền bao quanh padding và nội dung.
- Margin – không gian bên ngoài border (khoảng cách giữa border và các thành phần khác bên ngoài. Margin là trong suốt.
Mô hình hộp cho phép chúng ta thêm một đườ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ụ:
Chiều rộng và chiều cao của một phần tử
Để thiết lập chiều rộng và chiều cao của một phần tử chính xác trong tất cả các trình duyệt, bạn cần phải biết mô hình hộp làm việc ra sao.
Giả sử chúng ta muốn định kiểu (đặt style) cho phần tử <div> có chiều rộng là 350px:
Ví dụ:
Dưới đây là tính toán về chiều rộng tổng thể:
320px (chiều rộng) + 20px (padding trái + phải) + 10px (đường viền trái + phải) + 0px (margin trái + phải) = 350px
Chiều rộng tổng thể của một phần tử nên được tính như sau:
Chiều rộng tổng thể = chiều rộng + padding trái + padding phải + đường viền trái + đường viền phải + margin trái + margin phải
Chiều cao tổng thể của một phần tử nên được tính như sau:
Chiều cao tổng thể = chiều cao + padding trên + padding dưới + đường viền trên + đường viền dưới + margin trên + margin dưới.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
