如何解决在我的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
会在此时应用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。