แก้ช่องว่างไม่รู้สาเหตุระหว่างองค์ประกอบใน Flexbox ด้วย HTML5

ช่องว่างไม่รู้สาเหตุระหว่างองค์ประกอบใน flexbox เกิดจาก margin collapsing ของ header ไปยัง bar division เพื่อแก้ไข:

• ตั้งค่า Margin เป็น 0 สำหรับ header หรือ เพิ่ม Border ให้ bar
• Padding สามารถทำได้โดยเพิ่มคุณสมบัติ padding: 10px ให้ bar

ลองโค้ดสนิปเพ็ตด้านล่างเพื่อแก้ปัญหาช่องว่างไม่รู้สาเหตุ:

.bar {
  background: yellow;
  color: gray;
  height: 250px;
  padding: 10px;
  text-align: center;
}