Display Inline-Block trong CSS

Thuộc tính CSS display với giá trị inline-block hiển thị phần tử theo chiều rộng của nội dung hoặc chiều rộng được cung cấp (whichever is greater), và KHÔNG ép buộc ngắt dòng cho đến khi chiều rộng của phần tử cha được sử dụng hết.

Cú pháp

Selector {
  display: inline-block;
}

Ví dụ 1: Inline-block cơ bản

<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  input[type="button"] { border-radius: 10px; }
  .child { display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Display-Inline-Block</legend>
      <div id="container">
        <div class="child"></div><div class="child"></div><div class="child"></div>
        <div class="child"></div><div class="child"></div><div class="child"></div>
      </div><br>
    </fieldset>
  </form>
</body>
</html>

Kết quả

Ví dụ 2: So sánh display values trong cấu trúc lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
  #flex { display: flex; }
  #none { display: none; }
  .inline-block { display: inline-block; background-color: mintcream; }
  .grid { display: grid; background-color: cornflowerblue; }
  div { margin: 30px; padding: 5px; height: 10px; line-height: 5px; text-align: center; background-color: lightblue; border: 2px solid black; }
  div > div { background-color: lightpink; border: 2px solid green; }
  div > div > div { background-color: sandybrown; border: 2px solid darkred; }
</style>
</head>
<body>
  <div><span id="flex">One</span>
    <div><span id="none">Two</span>
      <div>
        <span class="inline-block">Three</span>
        <span class="inline-block">Four</span>
        <div>
          <span class="grid">Five</span>
          <span class="grid">Six</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Kết quả

Đặc điểm của display: inline-block:

• Giống inline: nằm trên cùng dòng, không ngắt dòng
• Giống block: chấp nhận width, height, margin, padding (tất cả 4 cạnh)
• Khoảng trắng (whitespace) trong HTML tạo ra khoảng cách giữa các inline-block elements
• Vertical-align mặc định là baseline (có thể đổi thành top, middle, bottom)

Ứng dụng phổ biến: Navigation menu, grid items, button groups, form inputs side-by-side, card layouts.

Fix khoảng trắng whitespace: font-size: 0 trên parent, hoặc bỏ comment giữa elements, hoặc dùng flexbox/grid thay thế.