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.
Mô hình box model CSS về cơ bản là một hộp bao quanh mọi HTML element. Nó bao gồm: margin, border, padding và content. Hình ảnh dưới đây minh họa mô hình box model:
Giải thích về các phần khác nhau:
- Content - Nội dung của hộp, nơi văn bản và hình ảnh xuất hiện
- Padding - Khu vực xung quanh content. Padding trong suốt
- Border - Đường viền bao quanh padding và content
- Margin - Khu vực bên ngoài border. Margin trong suốt
Mô hình box model cho phép chúng ta thêm border xung quanh các element và xác định không gian giữa các element.
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }