CSS display: block, inline, inline-block, none và flex

display làm gì

Mỗi phần tử có một giá trị display quyết định cách nó được bố trí. Ba giá trị bạn gặp đầu tiên là block, inline và inline-block. Dưới đây là ba hộp giống hệt nhau, cùng width, height, padding và margin, chỉ khác display:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

Trong khung xem trước, hộp block nằm riêng một dòng với chiều rộng 120px. Hộp inline bỏ qua width và height, chỉ bao quanh từ của nó, còn padding dọc và viền của nó lòi ra phía trên và phía dưới dòng mà không làm dòng cao thêm. Hộp inline-block nằm trong dòng chữ nhưng giữ nguyên kích thước đầy đủ.

display: block

Phần tử block chiếm toàn bộ chiều rộng còn trống và đẩy mọi thứ phía sau xuống dòng mới. Biến một liên kết thành block là cách làm cho cả một hàng bấm được:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Chiều rộng của block đặt được, và khi đã có chiều rộng thì margin: 0 auto sẽ căn giữa nó, như trang căn giữa div trình bày.

display: inline-block

inline-block là lựa chọn ở giữa: nó chảy trong dòng như một từ, nhưng bạn đặt được kích thước cho nó. Nó hữu ích cho nhãn, nút và biểu tượng nằm trong dòng chữ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Nhiều hộp inline-block trên một hàng sẽ có một khoảng hở nhỏ giữa chúng do khoảng trắng trong HTML. Với các hàng hộp, display: flex trên phần tử cha là công cụ tốt hơn.

display: none và visibility: hidden

Cả hai đều làm phần tử vô hình. Khác biệt nằm ở chỗ nó có giữ lại chỗ của mình hay không:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

Thuộc tính HTML hidden làm điều tương tự display: none thông qua stylesheet của trình duyệt, nghĩa là bất kỳ quy tắc CSS nào đặt display cho phần tử (ví dụ .card { display: flex; }) đều ghi đè nó và phần tử lại hiện ra. Thêm [hidden] { display: none !important; } nếu bạn gặp phải chuyện này.

Để ẩn một thứ về mặt hiển thị nhưng vẫn giữ cho trình đọc màn hình (ví dụ nhãn cho một nút chỉ có biểu tượng), hãy dùng một class "visually hidden" thay cho display: none.

display: flex và display: grid

Hai giá trị này biến một phần tử thành container bố cục cho các phần tử con của nó:

• display: flex xếp các phần tử con thành một hàng hoặc một cột, có thể điều khiển căn chỉnh và khoảng cách. Xem flexbox.
• display: grid đặt các phần tử con theo hàng và cột cùng lúc.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Bản thân container vẫn là một block. inline-flex và inline-grid làm điều tương tự với các phần tử con nhưng cho container chảy inline, giống inline-block.

Các giá trị khác

Lỗi thường gặp

• Đặt width hoặc height cho span hoặc a. Phần tử inline bỏ qua chúng. Hãy dùng inline-block hoặc block.
• Margin theo chiều dọc trên phần tử inline. Cũng bị bỏ qua. Cách sửa tương tự.
• Dùng display: none để ẩn chữ dành cho trình đọc màn hình. Nó ẩn luôn cả với trình đọc màn hình.
• Mong phần tử con hiện ra bên trong phần tử cha display: none. Không có gì bên trong phần tử cha bị ẩn được hiển thị.
• Một quy tắc display ghi đè thuộc tính hidden. Quy tắc CSS thắng.
• Tạo hiệu ứng chuyển động cho display. Đặt display: none ẩn phần tử ngay lập tức, không mờ dần; hãy tạo hiệu ứng cho opacity rồi chuyển display (hoặc visibility) ở cuối.