Khắc phục khoảng trắng lạ (gap) giữa các element trong Flexbox

Khoảng trắng (gap) không mong muốn giữa các flex item thường do margin collapsing (gộp margin) của các element con (thường là heading h1-h6) chạm vào flex container.

Nguyên nhân phổ biến

<div class="flex-container">
  <div class="header">
    <h1>Tiêu đề</h1> <!-- margin-top/bottom của h1 "rò rỉ" ra ngoài flex container -->
  </div>
  <div class="content">...</div>
</div>

Margin của <h1> collapse với margin của .header, và nếu .header không có padding/border/overflow để "chặn" → margin rò rỉ ra flex container, tạo gap.

Giải pháp (Ưu tiên từ cao xuống thấp)

1. Reset margin cho heading trong flex container (Khuyên dùng)

.flex-container h1, .flex-container h2, .flex-container h3,
.flex-container h4, .flex-container h5, .flex-container h6 {
  margin-top: 0;
  margin-bottom: 0; /* Hoặc chỉ margin-top: 0 nếu gap ở trên */
}

2. Thêm padding/border/overflow cho flex container (Tạo Block Formatting Context)

.flex-container {
  display: flex;
  flex-direction: column;
  /* Một trong 3 cái dưới đây đủ "chặn" margin collapsing: */
  padding: 1px;           /* Nhỏ nhất, không thấy */
  border: 1px solid transparent; 
  overflow: hidden;       /* Hoặc auto */
  /* Hoặc modern: */
  contain: layout;        /* CSS Containment */
}

3. Thêm padding cho flex item (header) trực tiếp

.header {
  padding-top: 1px; /* Chặn margin-top của h1 */
  /* Hoặc */
  overflow: hidden; /* Tạo BFC */
}

4. Dùng gap property (Modern, không fix margin collapsing nhưng thay thế spacing)

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Khoảng cách giữa items, không bị collapse */
}
/* Reset margin children về 0 để tránh double spacing */
.flex-container > * { margin: 0; }

Ví dụ tái tạo và fix

<!DOCTYPE html>
<html>
<head>
  <style>
    /* TRƯỜNG HỢP GÂY GAP */
    .bad-flex {
      display: flex;
      flex-direction: column;
      background: #ffe0e0;
    }
    .bad-flex .header { background: #ffcccc; }
    .bad-flex .content { background: #cceeff; height: 200px; }
    
    /* FIX: Thêm padding 1px cho container */
    .good-flex {
      display: flex;
      flex-direction: column;
      background: #e0ffe0;
      padding: 1px; /* FIX */
    }
    .good-flex .header { background: #ccffcc; }
    .good-flex .content { background: #cceeff; height: 200px; }
  </style>
</head>
<body>
  <h3>Có gap (do h1 margin collapsing)</h3>
  <div class="bad-flex">
    <div class="header"><h1>Header</h1></div>
    <div class="content">Content</div>
  </div>
  
  <h3>Không gap (fix bằng padding: 1px)</h3>
  <div class="good-flex">
    <div class="header"><h1>Header</h1></div>
    <div class="content">Content</div>
  </div>
</body>
</html>

Tóm tắt nhanh