Thuộc tính display trong CSS cho phép chúng ta xác định kiểu hiển thị của các thẻ HTML trên website. Thuộc tính này bao gồm 17 giá trị kèm theo nó….
1. display:block
Thuộc tính display:block có tác dụng xác định thành phần hiển thị theo các hàng độc lập.
Cú pháp:
selector{
display: block;
}
Ví dụ:
<span>Tìm hiểu về CSS</span> <span>Làm thế nào để xuống dòng</span>
Nếu như chúng ta viết như đoạn HTML trên thì sẽ hiển thị cùng 1 dòng, bởi <span> nó không có xuống dòng, nhưng khi áp dụng display:block vào thì nó sẽ xuống mỗi dòng.
2. display:inline
Thuộc tính này nó sẽ ngược lại với display:block ở trên, dù bạn có dùng thẻ <p> thì nó vẫn nằm trên dùng 1 dòng.
3. display:inline-block
Chúng ta hiểu được “block” là gì rồi đúng không, “block” là hiển thị cái gì đó theo khối, “inline” là hiển thị cái gì đó cùng 1 dòng. Vậy inline-block là hiển thị các khối trên cùng 1 hàng.
4. display: table
Cũng không khác gì display:inline-block ở trên, chủ yếu liệt kê cho bạn biết là nó có tồn tại.. ahihi
5. display:list-item
Thuộc tính này giúp hiển thị từng dòng như là thẻ <li>
6. display:none
Thuộc tính này thì để ẩn một cái gì đó.
7. display:table
Hiển thị thuộc tính cho thành phần nào nó giống như thẻ <table>
8. display:inherit
Thuộc tính này có tác dụng xác định thành phần được chọn kế thừa từ thuộc tính của thành phần cha.
9. Một số thuộc tính display khác
| Thuộc tính | Mô tả |
| display: table-caption | -Xác định như một thẻ <caption> trong table. |
| display: table-column-group | -Xác định như thẻ <colgroup> trong table. |
| display: table-header-group | -Xác định như thẻ <thead> trong table. |
| display: table-footer-group | -Xác định như thẻ <tfoot> trong table. |
| display: table-row-group | -Xác định như thẻ <tbody> trong table. |
| display: table-cell | -Xác định như thẻ <td> trong table. |
| display: table-column | -Xác định như thẻ <col> trong table. |
| display: table-row | -Xác định như thẻ <tr> trong table. |