Solve unknown gap between elements in Flexbox with HTML5.

Unknown gaps between elements in flexbox are due to margin collapsing of the header to the bar division. To resolve this −

• Either Margin is reset to 0 for header or Border is added to the bar.
• Padding can be done to bar by adding property padding: 10px to bar. 

Try the following code snippet to resolve the unknown gap problem −

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

Arjun Thakur

Published on 21-Mar-2018 07:58:36

• Related Questions & Answers
• How to work with Flexbox elements in CSS?
• How to set horizontal gap between elements in a GridLayout with Java?
• How to set vertical gap between elements in a GridLayout with Java?
• Specify the gap between the columns with CSS
• Advance CSS layout with flexbox
• How to set the gap between the columns with JavaScript?
• Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
• Create a Flexbox container with Bootstrap 4
• Horizontal and Vertical Center Alignment with Flexbox in CSS3
• Does 'position: absolute' conflict with flexbox?
• Mouse event not being triggered on HTML5 canvas? How to solve it?
• Resolve Unknown database in JDBC error with Java-MySQL?
• Not showing a placeholder for input type=“date” field with HTML5. How to solve it?
• CSS Flexbox Layout Module
• Maximum Gap in C++