Thuộc tính display trong CSS dùng để kiểm soát hiển thị của phần tử trên trang web. Các giá trị chính:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | inline Hiển thị như phần tử dòng |
| 2 | block Hiển thị như phần tử khối |
| 3 | contents Container biến mất, con thành con của cấp cha cao hơn |
| 4 | flex Hiển thị như flex container cấp khối |
| 5 | grid Hiển thị như grid container cấp khối |
| 6 | inline-block Hiển thị như block container cấp dòng |
| 7 | inline-flex Hiển thị như flex container cấp dòng |
| 8 | inline-grid Hiển thị như grid container cấp dòng |
| 9 | inline-table Hiển thị như bảng cấp dòng |
Ví dụ 1: none vs inline
<!DOCTYPE html>
<html>
<head>
<style>
span { background-color: orange; color: white; }
p.demo { display: none; }
span.demo1 { display: inline; }
</style>
</head>
<body>
<h1>Chi tiết trận đấu</h1>
<div>
Trận đấu bắt đầu lúc <p class="demo">9AM</p> 10AM ngày 20 tháng 12.
</div>
<div>
Trận đấu kết thúc lúc <span class="demo1">5PM</span> ngày 20 tháng 12.
</div>
</body>
</html>
Kết quả
Ví dụ 2: block vs inline-block
<!DOCTYPE html>
<html>
<head>
<style>
p { background-color: orange; color: white; }
p.demo1 { display: block; }
p.demo2 { display: inline-block; }
</style>
</head>
<body>
<h1>Chi tiết trận đấu</h1>
<div>
Trận đấu bắt đầu lúc <p class="demo1">10AM</p> ngày 19 tháng 12, 2019.
</div>
<div>
Trận đấu kết thúc lúc <p class="demo2">5PM</p> ngày 19 tháng 12, 2019.
</div>
</body>
</html>
Kết quả
Tóm tắt:
- none: Ẩn hoàn toàn, không render, không chiếm chỗ
- visibility: hidden: Ẩn nhưng vẫn chiếm chỗ (khác với display:none)
- block/inline/inline-block: Cơ bản nhất
- flex/grid: Layout hiện đại mạnh mẽ
- contents: Bỏ qua wrapper, con nối trực tiếp cha