Trong CSS, thuộc tính display xác định cách một phần tử được hiển thị trên trang web. Đây là một thuộc tính cực kỳ quan trọng vì nó quyết định cách phần tử chiếm không gian và tương tác với các phần tử khác.
Các giá trị phổ biến của display
1. block
- Phần tử chiếm toàn bộ chiều ngang của vùng chứa.
- Bắt đầu trên một dòng mới.
- Các phần tử mặc định là block: <div>, <p>, <h1> đến <h6>, <section>, v.v.
2. inline
- Phần tử chỉ chiếm không gian theo nội dung.
- Không bắt đầu trên dòng mới.
- Các phần tử mặc định là inline: <span>, <a>, <strong>, v.v.
3. inline-block
- Kết hợp ưu điểm của block và inline.
- Vẫn nằm trên cùng một dòng (như inline), nhưng có thể đặt width, height (giống block).
4. none
- Phần tử sẽ không hiển thị và không chiếm không gian trong bố cục.
- Khác với visibility: hidden (ẩn nhưng vẫn chiếm chỗ).
Các giá trị nâng cao của display (CSS3 và Flexbox/Grid)
1. flex
- Biến phần tử thành container linh hoạt, cho phép sắp xếp con theo chiều ngang/dọc dễ dàng.
- Sử dụng kèm với các thuộc tính như: justify-content, align-items, flex-direction, v.v.
2. grid
- Biến phần tử thành lưới 2 chiều (hàng + cột).
- Quản lý bố cục phức tạp dễ dàng với grid-template-rows, grid-template-columns, v.v.
3. inline-flex, inline-grid
- Tương tự như flex hoặc grid nhưng là kiểu inline, hiển thị trên cùng một dòng.
So sánh nhanh các giá trị
| Giá trị | Bắt đầu dòng mới | Có thể set width/height | Linh hoạt bố cục |
|---|---|---|---|
| block | ✅ | ✅ | ❌ |
| inline | ❌ | ❌ | ❌ |
| inline-block | ❌ | ✅ | ❌ |
| none | ❌ | ❌ | ❌ |
| flex | ✅ | ✅ | ✅ |
| grid | ✅ | ✅ | ✅ |
Ứng dụng thực tế
- Sử dụng display: none để ẩn/hiện popup, modal.
- Dùng flex để tạo layout menu, gallery ảnh.
- Dùng grid để xây dựng giao diện như dashboard hoặc form.
Giảng viên Cao Đăng Khoa
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
Hỗ trợ tư vấn và giải đáp thông tin tuyển sinh FPT Polytechnic
