Bài trước: CuTeoHocLamWeb (9) - Làm giao diện một trang thương mại
-----
10. CSS cho vùng header
Trước khi CSS cho vùng header, chúng ta cùng tìm hiểu một số kiến thức liên quan.
10.1 “Cái hộp” trong CSS
Cái hộp (box model) trong CSS là một mô hình trực quan hóa cách các phần tử HTML được hiển thị trên trang web. Mỗi phần tử HTML được coi như một cái hộp chữ nhật.
Ví dụ, chúng ta cùng xem “cái hộp” của phần tử header:
- Mở trang web coffeeshop/index.html bằng trình duyệt
- Trên giao diện của trang web, chuột phải vào vùng header > chọn Inspect
- Quan sát cái hộp của phần tử header
Xem hình minh họa:
“Cái hộp” gồm các
thành phần sau:
Content (nội
dung)
- Đây là phần bên trong cùng của hộp, chứa nội dung thực tế của phần tử, như văn bản, hình ảnh, video và các nội dung khác
- Kích thước của content được xác định bởi thuộc tính width (chiều rộng) và height (chiều cao)
Padding (Đệm trong)
- Là khoảng trống giữa content (nội dung) và border (đường viền) của phần tử
- Padding tạo ra khoảng cách bên trong phần tử
- Có thể thiết lập padding cho từng cạnh riêng biệt (top, right, bottom, left) hoặc cho tất cả các cạnh cùng lúc
Border (Đường viền)
- Là đường bao quanh padding, tạo đường viền cho hộp
- Có thể tùy chỉnh độ dày, kiểu dáng và màu sắc của đường viền
Margin (Đệm ngoài, Lề)
- Là khoảng trống giữa border của phần tử và các phần tử lân cận
- Margin tạo ra khoảng cách bên ngoài phần tử
- Có thể thiết lập margin cho từng cạnh riêng biệt (top, right, bottom, left) hoặc cho tất cả các cạnh cùng lúc
Để dễ hình dung, bạn hãy tưởng tượng, cái hộp của mỗi phần tử HTML chính là một hộp quà. Trong đó:
- Món quà ở bên trong chính là content
- Lớp xốp hoặc giấy bọc bảo vệ món quà bên trong là padding
- Vỏ hộp quà là border
- Khoảng cách giữa các hộp quà đặt cạnh nhau là margin
Cái hộp giúp bạn kiểm soát kích thước, khoảng cách, và vị trí của các phần tử HTML (ví dụ: div, button, paragraph) một cách chính xác.
-----
Cập nhật: 8/3/2025
Bài sau: