Thuộc tính <code>inline-block</code> trong CSS là một công cụ mạnh mẽ giúp tối ưu hiển thị các phần tử trong thiết kế web. Bằng cách kết hợp ưu điểm của cả phần tử <code>inline</code> và <code>block</code>, nó giúp tạo bố cục linh hoạt, căn chỉnh dễ dàng và phù hợp với nhiều tình huống khác nhau. Tuy nhiên, cần chú ý đến một số lỗi phổ biến như khoảng trắng không mong muốn hay khả năng tương thích với trình duyệt cũ để tối ưu hóa trang web một cách tốt nhất.Cùng <a target="_self" href="tempi.vn">Tempi&nbsp;</a>khám phá ngay nhé!

<h3>Ứng dụng của inline-block trong thiết kế web</h3>

<h3 style="--fontSizeDesktop: 16px" class="fs-desktop">2.1. Tạo bố cục linh hoạt với inline-block</h3>Một trong những ứng dụng phổ biến nhất của <code>inline-block</code> là giúp sắp xếp các phần tử trên cùng một dòng mà vẫn có thể kiểm soát kích thước.Ví dụ, khi thiết kế thanh điều hướng (<code>navbar</code>), bạn cần đặt nhiều mục trên cùng một hàng nhưng vẫn muốn điều chỉnh kích thước của từng mục:<pre><code>css</code></pre>CopyEdit<code>.navbar-item { display: inline-block; padding: 10px 20px; background-color: #2ecc71; color: white; }</code>Mỗi mục menu sẽ có kích thước phù hợp và không bị kéo giãn toàn bộ chiều rộng như <code>block</code>.<h3 style="--fontSizeDesktop: 16px" class="fs-desktop">2.2. Căn chỉnh nội dung mà không cần float hoặc flexbox</h3>Một lợi ích khác của <code>inline-block</code> là giúp căn chỉnh phần tử dễ dàng mà không cần dùng đến <code>float</code>, vốn có thể gây ra lỗi với <code>clearfix</code>.Ví dụ, để hiển thị một danh sách các sản phẩm theo hàng ngang, bạn có thể dùng:<pre><code>css</code></pre>CopyEdit<code>.product { display: inline-block; width: 200px; height: 300px; margin: 10px; background-color: #f1c40f; }</code>Cách này giúp sắp xếp sản phẩm gọn gàng mà không cần <code>float: left;</code> hoặc <code>flexbox</code>.<h3 style="--fontSizeDesktop: 16px" class="fs-desktop">2.3. Ứng dụng trong bố cục phức tạp</h3><code>inline-block</code> cũng rất hữu ích trong việc xây dựng bố cục lưới (<code>grid layout</code>) khi bạn chưa muốn sử dụng <code>grid</code> hoặc <code>flexbox</code>.Ví dụ, khi tạo danh sách bài viết trên blog:<pre><code>css</code></pre>CopyEdit<code>.article { display: inline-block; width: 45%; margin: 2%; background-color: #ecf0f1; }</code>Nhờ <code>inline-block</code>, bạn có thể dễ dàng điều chỉnh kích thước bài viết sao cho phù hợp với thiết kế.

<h2>Lưu ý và cách khắc phục lỗi thường gặp khi dùng inline-block</h2>

Trong thiết kế web, mỗi thuộc tính CSS đều có một vai trò quan trọng trong việc định hình cách hiển thị nội dung. Nếu không sử dụng đúng các thuộc tính, giao diện website có thể bị lỗi, mất cân đối hoặc khó đọc trên nhiều thiết bị khác nhau. Một trong những thuộc tính quan trọng nhất trong CSS là <code>inline-block</code>. Đây là một giải pháp giúp kết hợp những ưu điểm của hai kiểu hiển thị phổ biến: <code>inline</code> và <code>block</code>.Bạn có bao giờ gặp phải tình huống muốn căn chỉnh một nhóm phần tử trên cùng một dòng nhưng vẫn cần kiểm soát kích thước của chúng? <code>inline-block</code> chính là câu trả lời! Không giống như <code>block</code>, phần tử không chiếm toàn bộ chiều rộng của cha, nhưng cũng không giống <code>inline</code>, vì nó vẫn có thể thay đổi kích thước linh hoạt. Trong bài viết này, chúng ta sẽ khám phá sâu hơn về <code>inline-block</code>, cách hoạt động của nó, ứng dụng trong thiết kế web, và cách giải quyết một số vấn đề thường gặp.

ĐĂNG KÝ NGAY

<h4 style="--fontSizeDesktop: 16px" class="fs-desktop">3.1. Khoảng trắng giữa các phần tử inline-block</h4>Một lỗi phổ biến khi sử dụng <code>inline-block</code> là có khoảng trắng không mong muốn giữa các phần tử. Nguyên nhân do trình duyệt hiểu các phần tử inline-block như một đoạn văn bản, tạo ra khoảng trống giữa chúng. Cách khắc phục:<ul><li style="--fontSizeDesktop: 16px" class="fs-desktop">Cách 1: Dùng <code>font-size: 0;</code> trên thẻ cha để loại bỏ khoảng trắng.</li></ul><pre><code>css</code></pre>CopyEdit<code>.container { font-size: 0; } .box { display: inline-block; width: 100px; height: 100px; background-color: #2ecc71; }</code><ul><li style="--fontSizeDesktop: 16px" class="fs-desktop">Cách 2: Xóa khoảng trắng trong mã HTML giữa các phần tử.</li></ul><h4 style="--fontSizeDesktop: 16px" class="fs-desktop">3.2. Không tương thích hoàn toàn với mọi trình duyệt</h4>Mặc dù <code>inline-block</code> hoạt động tốt trên hầu hết các trình duyệt hiện đại, nhưng một số trình duyệt cũ (ví dụ: Internet Explorer 7) có thể không hỗ trợ tốt. Để khắc phục, bạn có thể sử dụng <code>display: inline;</code> kết hợp với <code>zoom: 1;</code> cho trình duyệt cũ.<pre><code>css</code></pre>CopyEdit<code>.old-browser-support { display: inline-block; zoom: 1; *display: inline; }</code><h4 style="--fontSizeDesktop: 16px" class="fs-desktop">3.3. Khi nào KHÔNG nên dùng inline-block?</h4><ul><li style="--fontSizeDesktop: 16px" class="fs-desktop">Khi bạn cần một hệ thống layout phức tạp, <code>flexbox</code> hoặc <code>grid</code> sẽ phù hợp hơn.</li><li style="--fontSizeDesktop: 16px" class="fs-desktop">Khi bạn không muốn xử lý các khoảng trắng giữa phần tử.</li><li style="--fontSizeDesktop: 16px" class="fs-desktop">Khi cần bố cục tự động xuống dòng linh hoạt hơn (sử dụng <code>flex-wrap</code> với <code>flexbox</code> sẽ hiệu quả hơn).</li></ul>

<h3 style="--fontSizeDesktop: 16px" class="fs-desktop">1.1. Định nghĩa chi tiết về inline-block</h3>Trong CSS, thuộc tính <code>display</code> quyết định cách một phần tử hiển thị trên trang web. Có ba giá trị quan trọng của thuộc tính này là:<ul><li style="--fontSizeDesktop: 16px" class="fs-desktop"><code>inline</code>: Phần tử nằm trên cùng một dòng với các phần tử khác, nhưng không thể thiết lập chiều rộng (<code>width</code>) hoặc chiều cao (<code>height</code>).</li><li style="--fontSizeDesktop: 16px" class="fs-desktop"><code>block</code>: Phần tử chiếm toàn bộ chiều rộng của cha, tự động xuống dòng và có thể đặt kích thước tùy chỉnh.</li><li style="--fontSizeDesktop: 16px" class="fs-desktop"><code>inline-block</code>: Kết hợp hai đặc điểm trên: hiển thị trên cùng một dòng nhưng vẫn có thể đặt chiều rộng và chiều cao.</li></ul>Cụ thể, <code>inline-block</code> giúp phần tử giữ nguyên vị trí trong dòng như <code>inline</code>, nhưng có thể thay đổi kích thước, giống như <code>block</code>. Điều này giúp bạn tạo ra các bố cục linh hoạt mà không cần dùng <code>float</code> hay <code>flexbox</code>.Ví dụ về cách sử dụng <code>inline-block</code>:<pre><code>css</code></pre>CopyEdit<code>.button { display: inline-block; width: 120px; height: 40px; background-color: #3498db; color: white; text-align: center; line-height: 40px; border-radius: 5px; }</code>Trong đoạn mã trên, nếu sử dụng <code>inline</code>, phần tử sẽ không thể thay đổi kích thước, và nếu dùng <code>block</code>, nó sẽ chiếm toàn bộ chiều rộng. <code>inline-block</code> giúp giữ nút trên cùng một dòng với các nút khác nhưng vẫn có thể điều chỉnh kích thước.<h3 style="--fontSizeDesktop: 16px" class="fs-desktop">1.2. So sánh chi tiết với inline và block</h3><table><tbody><tr><th colspan="1" rowspan="1">Thuộc tính</th><th colspan="1" rowspan="1">Hiển thị cùng dòng</th><th colspan="1" rowspan="1">Có thể đặt width/height</th><th colspan="1" rowspan="1">Xuống dòng tự động</th><th colspan="1" rowspan="1">Ứng dụng phổ biến</th></tr><tr><td colspan="1" rowspan="1"><code>inline</code></td><td colspan="1" rowspan="1">✔</td><td colspan="1" rowspan="1">❌</td><td colspan="1" rowspan="1">❌</td><td colspan="1" rowspan="1">Văn bản, liên kết</td></tr><tr><td colspan="1" rowspan="1"><code>block</code></td><td colspan="1" rowspan="1">❌</td><td colspan="1" rowspan="1">✔</td><td colspan="1" rowspan="1">✔</td><td colspan="1" rowspan="1">Khối nội dung lớn</td></tr><tr><td colspan="1" rowspan="1"><code>inline-block</code></td><td colspan="1" rowspan="1">✔</td><td colspan="1" rowspan="1">✔</td><td colspan="1" rowspan="1">❌</td><td colspan="1" rowspan="1">Nút bấm, menu, bố cục linh hoạt</td></tr></tbody></table>Ví dụ cụ thể để minh họa sự khác biệt giữa ba giá trị này:<pre><code>html</code></pre>CopyEdit<code>&lt;div style="display: inline;"&gt;Inline&lt;/div&gt; &lt;div style="display: block;"&gt;Block&lt;/div&gt; &lt;div style="display: inline-block;"&gt;Inline-Block&lt;/div&gt;</code><ul><li style="--fontSizeDesktop: 16px" class="fs-desktop">Inline: Các phần tử nằm cùng dòng nhưng không thể đặt kích thước cụ thể.</li><li style="--fontSizeDesktop: 16px" class="fs-desktop">Block: Mỗi phần tử chiếm toàn bộ dòng, tự động xuống hàng.</li><li style="--fontSizeDesktop: 16px" class="fs-desktop">Inline-Block: Các phần tử nằm cùng dòng nhưng vẫn có thể đặt chiều rộng và chiều cao.</li></ul>Nhờ vào sự linh hoạt này, <code>inline-block</code> rất hữu ích trong thiết kế UI/UX của trang web.

Trong bài viết này, chúng ta sẽ khám phá sâu hơn về inline-block, cách hoạt động của nó, ứng dụng trong thiết kế web, và cách giải quyết một số vấn đề thường gặp.

Inline Block là gì?

Thông tin liên hệ