Syntax error Solve unknown gap between elements in Flexbox with HTML5.

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;
}
Updated on: 2020-06-24T14:06:10+05:30

242 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements