Thuộc tính Display trong CSS được dùng để thiết lập cách phần tử hiển thị trên trang web. Dưới đây là các giá trị phổ biến:
| STT | Giá trị | Mô tả |
|---|---|---|
| 1 | inline | Hiển thị như phần tử dòng (inline) |
| 2 | block | Hiển thị như phần tử khối (block) |
| 3 | contents | Container biến mất, con trở 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 chiếm diện tích
- block: Ngắt dòng, chiếm toàn bộ chiều ngang
- inline: Cùng dòng, không set được width/height
- inline-block: Cùng dòng, set được width/height
- flex/grid: Layout hiện đại mạnh mẽ