Trong CSS, các thuộc tính hiển thị của phần tử (display properties) như inline, block, và inline-block là rất quan trọng trong việc xác định cách phần tử hiển thị trên trang. Hiểu rõ sự khác biệt giữa chúng sẽ giúp bạn tạo ra bố cục chính xác và hợp lý cho trang web của mình.
Phần tử được thiết lập với thuộc tính display: inline sẽ chỉ chiếm không gian cần thiết cho nội dung bên trong của nó và không tạo ra khoảng trống trước hoặc sau phần tử đó.
.inline {
display: inline;
}Phần tử với thuộc tính display: block sẽ chiếm toàn bộ chiều rộng của phần tử chứa nó (parent element) và tạo ra một dòng mới trước và sau nó. Điều này có nghĩa là các phần tử block sẽ không nằm cạnh nhau mà xếp chồng lên nhau.
.block {
display: block;
}Phần tử được thiết lập với thuộc tính display: inline-block kết hợp các tính chất của cả inline và block. Nó cho phép phần tử giữ được khả năng xếp ngang (inline) nhưng cũng có thể có chiều cao và chiều rộng như một phần tử block.
.inline-block {
display: inline-block;
}<span class="inline">Phần tử inline 1</span>
<span class="inline">Phần tử inline 2</span><div class="block">Phần tử block 1</div>
<div class="block">Phần tử block 2</div><div class="inline-block">Phần tử inline-block 1</div>
<div class="inline-block">Phần tử inline-block 2</div><span>, <a>, <strong> khi không cần tạo khoảng cách giữa các phần tử hoặc không cần tạo dòng mới.<div>, <p>, <h1> để tạo ra các khối rõ ràng và sắp xếp theo chiều dọc.
