huộc tính display trong CSS rất quan trọng để xác định cách một phần tử HTML được hiển thị trong tài liệu. Dưới đây là một số giá trị chính của thuộc tính này:

1. block
Mô tả: Phần tử chiếm toàn bộ chiều rộng của bố cục và bắt đầu trên một dòng mới.
Ví dụ: <div>, <h1>, <p>.
2. inline
Mô tả: Phần tử chỉ chiếm chiều rộng cần thiết và không bắt đầu trên một dòng mới.
Ví dụ: <span>, <a>, <strong>.
3. inline-block
Mô tả: Phần tử hiển thị như một phần tử inline nhưng cho phép thiết lập chiều rộng và chiều cao.
Ví dụ: Thường được sử dụng cho các phần tử có kích thước cụ thể mà không muốn bắt đầu trên dòng mới.
4. none
Mô tả: Phần tử sẽ không được hiển thị và không chiếm không gian trong bố cục.
Sử dụng: Thường được sử dụng để ẩn phần tử.
5. flex
Mô tả: Thiết lập chế độ bố cục linh hoạt, giúp sắp xếp các phần tử con theo cách linh hoạt.
Sử dụng: Cần được áp dụng cho phần tử cha để tạo ra một bố cục flexbox.
6. grid
Mô tả: Thiết lập bố cục dạng lưới, cho phép sắp xếp các phần tử theo hàng và cột.
Sử dụng: Cần được áp dụng cho phần tử cha để tạo ra một bố cục grid.
7. table
Mô tả: Thiết lập phần tử như một bảng, tương tự như cách mà các phần tử bảng hoạt động.
Ví dụ: display: table, display: table-row, display: table-cell.
ví dụ :
.container {
display: flex; /* Hoặc grid, block, inline, etc. */
}

.item {
display: inline-block;
}
Kết luận
Sử dụng thuộc tính display đúng cách sẽ giúp bạn kiểm soát cách các phần tử tương tác với nhau trong bố cục. Nếu bạn cần thêm thông tin hoặc ví dụ cụ thể, đừng ngần ngại hỏi!