Hi! Trong bài viết này codetuthub sẽ liệt kê 23 các giá trị của display trong CSS, sau đây là bảng tóm tắt:

1. inline

Giá trị inline sẽ hiển thị trong cùng một dòng với các phần tử khác, không bắt đầu trên một dòng mới. Tuy nhiên, các thuộc tính như width, height, margin-top, margin-bottom không có hiệu lực.

Ví dụ:

span {
    display: inline;
}

2. block

Giá trị block sẽ chiếm toàn bộ chiều ngang của container, bắt đầu trên một dòng mới, và bạn có thể thay đổi kích thước của nó bằng các thuộc tính width và height.

Ví dụ:

div {
    display: block;
}

3. contents

Giá trị này khiến phần tử không được hiển thị trong DOM, nhưng các phần tử con của nó vẫn được hiển thị.

Ví dụ:

div {
    display: contents;
}

4. flex

Giá trị flex tạo ra một container Flexbox để sắp xếp các phần tử con theo hướng linh hoạt.

Ví dụ:

div {
    display: flex;
}

5. grid

Giá trị grid thiết lập một container CSS Grid để tạo bố cục lưới gồm các hàng và cột.

Ví dụ:

div {
    display: grid;
}

6. inline-block

Giá trị inline-block hiển thị trên cùng một dòng với các phần tử khác (giống inline), nhưng vẫn cho phép đặt kích thước bằng các thuộc tính width và height (giống block).

Ví dụ:

span {
    display: inline-block;
}

7. inline-flex

Giống flex, nhưng phần tử sẽ hiển thị trong cùng một dòng với các phần tử khác như một phần tử inline.

Ví dụ:

div {
    display: inline-flex;
}

8. inline-grid

Giống grid, nhưng phần tử sẽ hiển thị trên cùng một dòng với các phần tử khác.

Ví dụ:

div {
    display: inline-grid;
}

9. inline-table

Phần tử hiển thị như một bảng (table) nhưng vẫn là một phần tử inline.

Ví dụ:

table {
    display: inline-table;
}

10. list-item

Phần tử hiển thị như một mục danh sách với dấu đầu dòng hoặc số thứ tự.

Ví dụ:

li {
    display: list-item;
}

11. run-in

Giá trị này rất ít được sử dụng. Tùy thuộc vào ngữ cảnh, phần tử có thể hiển thị như một phần tử inline hoặc block.

Ví dụ:

div {
    display: run-in;
}

12. table

Phần tử sẽ được hiển thị giống như một bảng (table).

Ví dụ:

div {
    display: table;
}

13. table-caption

Phần tử sẽ hiển thị như phần chú thích của một bảng, thường được đặt phía trên hoặc dưới bảng.

Ví dụ:

caption {
    display: table-caption;
}

14. table-column-group

Phần tử hiển thị như một nhóm cột trong bảng, thường chứa các phần tử <col>.

Ví dụ:

colgroup {
    display: table-column-group;
}

15. table-header-group

Phần tử hiển thị như phần tiêu đề (header) của một bảng, thường chứa các phần tử <thead>.

Ví dụ:

thead {
    display: table-header-group;
}

16. table-footer-group

Phần tử hiển thị như phần chân bảng (footer), thường chứa các phần tử <tfoot>.

Ví dụ:

tfoot {
    display: table-footer-group;
}

17. table-row-group

Phần tử hiển thị như một nhóm hàng của bảng, thường chứa các phần tử <tbody>.

Ví dụ:

tbody {
    display: table-row-group;
}

18. table-cell

Phần tử sẽ được hiển thị như một ô trong bảng (cell).

Ví dụ:

td {
    display: table-cell;
}

19. table-column

Phần tử hiển thị như một cột trong bảng, thường được sử dụng với <col>.

Ví dụ:

col {
    display: table-column;
}

20. table-row

Phần tử hiển thị như một hàng trong bảng, thường được sử dụng với các phần tử <tr>.

Ví dụ:

tr {
    display: table-row;
}

21. none

Phần tử sẽ không hiển thị trên trang và không chiếm bất kỳ không gian nào.

Ví dụ:

div {
    display: none;
}

22. initial

Đặt thuộc tính display về giá trị mặc định của phần tử.

Ví dụ:

div {
    display: initial;
}

23. inherit

Kế thừa giá trị display từ phần tử cha.

Ví dụ:

div {
    display: inherit;
}

Kết luận

Thuộc tính display rất quan trọng trong CSS, giúp bạn kiểm soát cách phần tử hiển thị và tương tác với các phần tử khác trên trang. Từ việc ẩn phần tử với display: none đến việc tạo các bố cục phức tạp với Flexbox và Grid, hiểu rõ các giá trị của display sẽ giúp bạn làm chủ thiết kế web của mình.