在我的React应用的页脚中添加“ display：flex”，会在其下方添加空格，这是为什么呢？

问题描述

就像标题中所说的那样，当我将display: flex添加到应用程序的页脚CSS时，页面底部会出现多余的空格，并启用了滚动。它似乎是由页脚内跨度为1rem引起的。当显示不是屈曲时，跨度不会引起问题，所以flexbox会仅以不同的方式解释页边距吗？以及如何防止多余的空间出现？

我还希望将空白与React root div关联，因为那是页脚所在的位置，但是经过检查，它似乎附加在了页面as can be seen here.的正文中，为什么？>

尽管进行了谷歌搜索，但我仍然不知道为什么会这样，所以对不起，如果这是一个非常简单的解决方案，而我只是错过了答案！

以下是我的页脚代码的片段：

HTML

<div className="Palette">
  <Navbar level={level} changeLevel={this.changeLevel} handleChange={this.changeFormat}/>
  <div className="Palette-colours">
    {colourBoxes}
  </div>
  <footer className='Palette-footer'>
    {paletteName}
    <span className='emoji'>{emoji}</span>
  </footer>
</div>

CSS

.Palette {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.Palette-footer {
  background: white;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
}

.emoji {
  font-size: 1.5rem;
  margin: 1rem;
}

谢谢您的帮助：）

解决方法

默认情况下，span是一个内联元素，并且您应用于它的margin实际上不会被渲染。

一旦将其父元素设置为flexbox元素，span就会成为块级元素，并且margin会在此时应用。