Solve unknown gap between elements in Flexbox with HTML5.

HTMLWeb DevelopmentFront End Technology

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;
Published on 21-Mar-2018 07:58:36