使用HTML5解决Flexbox中元素之间的未知间距。

flexbox中元素之间的未知间距是由于标头到条形分隔线的边距折叠所致。解决这个问题-

  • 要么将页眉的“边距”重置为0,要么将“边框”添加到了条形图。

  • 可以通过添加属性padding来对bar进行填充:向bar添加10px。 

尝试以下代码片段来解决未知间隙问题-

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