Trong lập trình web, display là một thuộc tính quan trọng của CSS, giúp bạn xác định cách một phần tử HTML sẽ hiển thị trên trang web. Một trong những giá trị phổ biến và hữu ích của thuộc tính này là inline-block. Vậy inline-block là gì, nó hoạt động như thế nào và làm sao để sử dụng nó một cách hiệu quả? Hãy cùng tìm hiểu trong bài viết này.

1. Khái niệm về inline-block

inline-block là một giá trị của thuộc tính display trong CSS, kết hợp các đặc tính của cả hai giá trị khác là inline và block.

• Phần tử inline (ví dụ: <span>, <a>) thường hiển thị liên tiếp trên cùng một dòng, và không chiếm toàn bộ chiều rộng của khung chứa nó. Các phần tử này không tôn trọng các thuộc tính về width hoặc height.
• Phần tử block (ví dụ: <div>, <p>) hiển thị theo từng khối, mỗi khối sẽ chiếm toàn bộ chiều rộng của khung chứa và có thể sử dụng các thuộc tính width và height.

Phần tử inline-block là sự kết hợp giữa hai loại phần tử trên. Nó:

• Hiển thị trên cùng một dòng với các phần tử khác (như inline).
• Có thể điều chỉnh kích thước với các thuộc tính width và height (như block).

Cú pháp:

selector {
    display: inline-block;
}

2. Lợi ích của việc sử dụng inline-block

Sử dụng inline-block mang lại nhiều lợi ích, đặc biệt khi bạn muốn tạo các bố cục phức tạp mà không phải dùng đến float hay flexbox. Dưới đây là một số lợi ích chính:

a. Dễ dàng căn chỉnh các phần tử trên cùng một dòng

Phần tử với display: inline-block có thể xếp ngang với các phần tử khác mà không yêu cầu sử dụng float hay position. Điều này giúp tránh được các vấn đề liên quan đến việc "clear float".

b. Hỗ trợ thuộc tính kích thước

Không giống như phần tử inline, bạn có thể điều chỉnh width và height của phần tử inline-block.

c. Không phá vỡ bố cục

Sử dụng inline-block cho phép bạn tạo các phần tử block nằm trên cùng một dòng mà không cần thay đổi cấu trúc HTML quá phức tạp.

3. Ví dụ về cách sử dụng inline-block

a. Hiển thị các phần tử cạnh nhau

Ví dụ đơn giản về việc hiển thị nhiều phần tử nằm ngang trên cùng một dòng bằng cách sử dụng inline-block.

HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

CSS:

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    text-align: center;
    line-height: 100px;  /* Giúp căn giữa nội dung theo chiều dọc */
}

Kết quả:

Các "Box" sẽ được hiển thị cạnh nhau trên cùng một dòng, mỗi box có kích thước xác định và không phá vỡ dòng như các phần tử block.

b. Tạo bố cục menu ngang

Bạn có thể sử dụng inline-block để tạo một menu ngang mà không cần sử dụng float.

HTML:

<nav>
    <ul class="menu">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

CSS:

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu li {
    display: inline-block;
    padding: 10px 20px;
    background-color: lightgreen;
    margin-right: 5px;
}

Kết quả:

Các mục menu sẽ được hiển thị ngang hàng nhau, dễ dàng tạo một thanh điều hướng gọn gàng.

4. Khoảng trắng giữa các phần tử inline-block

Một vấn đề thường gặp khi sử dụng inline-block là khoảng trắng không mong muốn giữa các phần tử. Điều này xảy ra do các phần tử inline-block được xử lý như các phần tử văn bản, và khoảng trắng giữa các phần tử HTML sẽ được tính là khoảng trắng giữa các phần tử.

Giải pháp:

• Xóa khoảng trắng trong mã HTML: Đặt các phần tử inline-block liền kề nhau mà không có khoảng trắng giữa các thẻ.
• Sử dụng font-size: 0 cho phần tử cha: Thiết lập font-size của phần tử cha bằng 0 và sau đó chỉnh lại font-size cho các phần tử con.

Ví dụ xóa khoảng trắng bằng font-size: 0:

CSS & HTML:

<style>
.container {
    font-size: 0;
}

.box {
    display: inline-block;
    font-size: 16px; /* Thiết lập lại font-size cho phần tử con */
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    text-align: center;
    line-height: 100px;
}
</style>
<div class="container">
    <div class="box">Box 1</div><!--
    --><div class="box">Box 2</div><!--
    --><div class="box">Box 3</div>
</div>

5. Khi nào nên sử dụng inline-block?

• Khi bạn cần hiển thị nhiều phần tử block trên cùng một dòng mà không cần sử dụng float.
• Khi bạn muốn tạo bố cục đơn giản mà không cần đến flexbox hay grid.
• Khi bạn cần khả năng thay đổi kích thước của phần tử nhưng vẫn giữ chúng trên cùng một dòng.

6. So sánh giữa inline-block và các giá trị khác của display

inline-block cho phép sự linh hoạt giữa việc sắp xếp các phần tử theo dòng mà vẫn có thể chỉnh sửa kích thước, trong khi các phần tử inline bị giới hạn trong việc thay đổi kích thước.

Kết luận

display: inline-block là một công cụ hữu ích trong CSS, kết hợp giữa tính linh hoạt của các phần tử inline và khả năng điều chỉnh kích thước của các phần tử block. Nó giúp bạn dễ dàng xây dựng các bố cục phức tạp như menu ngang, lưới sản phẩm hoặc sắp xếp các phần tử theo chiều ngang mà không cần sử dụng các kỹ thuật phức tạp như float hay flexbox. Tuy nhiên, cần chú ý đến vấn đề khoảng trắng không mong muốn và cách khắc phục nó. Sử dụng inline-block đúng cách sẽ giúp bạn dễ dàng điều chỉnh giao diện và trải nghiệm người dùng trên trang web của mình.