Trong HTML, mỗi phần tử khi hiển thị sẽ chiếm không gian theo một cách nhất định: có cái chiếm cả dòng, có cái chỉ chiếm theo nội dung, có cái ẩn hoàn toàn khỏi giao diện.
Hiểu được các giá trị của thuộc tính display trong CSS là chìa khóa để sắp xếp layout chính xác và tránh lỗi khó chịu khi làm giao diện web.
Trong bài này, chúng ta sẽ tìm hiểu kỹ về 4 giá trị cơ bản nhất: block, inline, inline-block, và none.
1. display: block – chiếm trọn một dòng
div {
display: block;
}
- Là kiểu mặc định của các thẻ như:
div,p,h1,section,article - Khi một phần tử là block:
- Nó chiếm toàn bộ chiều ngang của dòng
- Xuống dòng sau nó
Ví dụ:
<p>Đây là đoạn văn thứ nhất.</p>
<p>Đây là đoạn văn thứ hai.</p>
→ Hai đoạn này nằm ở hai dòng khác nhau vì p là phần tử block.
2. display: inline – không xuống dòng, chỉ chiếm vừa nội dung
span {
display: inline;
}
- Là kiểu mặc định của các thẻ như
span,a,strong,em - Phần tử inline:
- Không xuống dòng
- Không thể đặt
width,height,margin-top/bottom
Ví dụ:
<p>Nội dung <span>này là inline</span> và nằm trong dòng.</p>
→ span nằm trong dòng, không phá vỡ bố cục đoạn văn.
3. display: inline-block – kết hợp cả block và inline
button {
display: inline-block;
}
- Giống như inline:
- Không xuống dòng
- Giống như block:
- Có thể đặt
width,height,padding,margin
- Có thể đặt
Ví dụ:
<a class="btn" href="#">Xem thêm</a>
.btn {
display: inline-block;
padding: 10px 20px;
background: #2196f3;
color: white;
text-decoration: none;
border-radius: 5px;
}
→ Dùng để tạo nút bấm đẹp mắt.
4. display: none – ẩn hoàn toàn phần tử
.hidden {
display: none;
}
- Ẩn khỏi giao diện và không chiếm chỗ
- Dùng cho các mục như menu ẩn, popup…
Lưu ý: nếu bạn muốn ẩn tạm thời nhưng vẫn giữ chỗ, dùng
visibility: hidden
5. So sánh các giá trị display
| Giá trị | Có xuống dòng không? | Đặt kích thước được không? | Có chiếm chỗ không? |
|---|---|---|---|
block | Có | Có | Có |
inline | Không | Không | Có |
inline-block | Không | Có | Có |
none | Không | Không | Không (ẩn hoàn toàn) |
6. Thực hành
style.css
.block {
display: block;
background: #c8e6c9;
padding: 10px;
margin-bottom: 10px;
}
.inline {
display: inline;
background: #ffe0b2;
padding: 5px;
}
.inline-block {
display: inline-block;
background: #bbdefb;
padding: 10px 15px;
margin-right: 10px;
border-radius: 4px;
}
.none {
display: none;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 10 – Display</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block">Phần tử block – chiếm cả dòng</div>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<br><br>
<div class="inline-block">Nút 1</div>
<div class="inline-block">Nút 2</div>
<div class="none">Bạn sẽ không thấy dòng này</div>
</body>
</html>
7. Ghi nhớ
Thuộc tính display | Tác dụng chính |
|---|---|
block | Chiếm toàn bộ dòng |
inline | Nằm trong dòng, không đặt size |
inline-block | Giống inline, nhưng đặt được size |
none | Ẩn phần tử, không chiếm không gian |
Thảo luận