Inline, Block và Inline-Block Trong CSS: Sự Khác Biệt Là Gì?

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.

1. Định Nghĩa

1.1. Inline

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;
}

1.2. Block

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;
}

1.3. Inline-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;
}

2. Hình Thức Hiển Thị

2.1. Inline

• Kích thước: Chỉ chiếm không gian cần thiết.
• Dòng mới: Không tạo ra dòng mới trước và sau.
• Khoảng cách: Có thể tạo khoảng cách giữa các phần tử bằng cách sử dụng margin, nhưng padding chỉ ảnh hưởng đến chiều rộng của phần tử.

2.2. Block

• Kích thước: Chiếm toàn bộ chiều rộng của phần tử chứa.
• Dòng mới: Tạo ra dòng mới trước và sau.
• Khoảng cách: Margin và padding sẽ ảnh hưởng đến không gian xung quanh.

2.3. Inline-Block

• Kích thước: Chiếm không gian cần thiết nhưng vẫn có thể có chiều cao và chiều rộng.
• Dòng mới: Không tạo ra dòng mới trước và sau.
• Khoảng cách: Có thể sử dụng cả margin và padding như phần tử block, đồng thời vẫn giữ được xếp ngang như phần tử inline.

3. Ví Dụ Minh Họa

3.1. Ví dụ Về Inline

<span class="inline">Phần tử inline 1</span>
<span class="inline">Phần tử inline 2</span>

3.2. Ví dụ Về Block

<div class="block">Phần tử block 1</div>
<div class="block">Phần tử block 2</div>

3.3. Ví dụ Về Inline-Block

<div class="inline-block">Phần tử inline-block 1</div>
<div class="inline-block">Phần tử inline-block 2</div>

4. Ứng Dụng Thực Tế

4.1. Khi Nào Sử Dụng Inline?

• Sử dụng cho các phần tử như <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.

4.2. Khi Nào Sử Dụng Block?

• Sử dụng cho các phần tử như <div>, <p>, <h1> để tạo ra các khối rõ ràng và sắp xếp theo chiều dọc.

4.3. Khi Nào Sử Dụng Inline-Block?

• Sử dụng cho các phần tử cần xếp ngang nhưng vẫn cần chiều rộng và chiều cao, như các nút bấm hoặc hình ảnh trong một layout.