在我的 React 应用程序的页脚添加“display: flex”会在其下方添加空白，为啥会这样？

Posted 2023-03-06

【中文标题】在我的 React 应用程序的页脚添加“display: flex”会在其下方添加空白，为啥会这样？

【英文标题】：Adding "display: flex" to the footer of my React app adds whitespace below it, why is this happening?在我的 React 应用程序的页脚添加“display: flex”会在其下方添加空白，为什么会这样？

【发布时间】：2020-12-12 15:09:34

【问题描述】：

正如标题所说，当我将display: flex 添加到我的应用程序的页脚 CSS 时，页面底部会出现额外的空白，并且启用了滚动。它似乎是由页脚内的一个跨度引起的，该跨度的边距为 1rem。当 display 不是 flex 时 span 不会引起问题，那么 flexbox 是否只是以不同的方式解释边距？以及如何防止出现多余的空间？

另外，我希望空白与 React 根 div 相关联，因为那是页脚所在的位置，但经过检查，它似乎附加到页面的主体 as can be seen here. 这是为什么？

尽管谷歌搜索我无法弄清楚为什么会发生这种情况，如果这是一个超级简单的修复，我只是错过了答案，很抱歉！

这是我的页脚代码的 sn-ps：

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;

感谢您的帮助:)

【参考方案1】：

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

一旦您将其父元素设为弹性框元素，span 将成为块级元素，margin 将在此时应用。