Solving unknown gaps between elements in Flexbox using HTML5

# Unknown gaps between elements in Flexbox are caused by margin collapse from header to column split. To fix this -

• Reset the header's margins to 0, or add a border to the column.
• You can fill the bar by adding the attribute padding: 10px to the bar.

Try the following code snippet to resolve the unknown gap issue -

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

The above is the detailed content of Solving unknown gaps between elements in Flexbox using HTML5. For more information, please follow other related articles on the PHP Chinese website!