如何解决如何消除React JS中的Font Awesome Icon和段落之间的差距?
我正在尝试将图标caret-down
的顶部与我的p
的底部对齐:
箭头和p
之间有一个缝隙,我不知道如何摆脱这个缝隙。
我将p
设置为margin-bottom: 0
,但是图像的间隙仍然存在。
我的第二个猜测是将图标设置为负数margin-top
,但目前为止仍然有效:
上图显示了当我用margin-top: -10px
设置图标时会发生什么。我仍然有差距,这是我能最接近p
旁边的图标的地方,我减少margin-top
的数量无关紧要,这是极限。
也许这些图标有些我不知道的东西。
我的代码示例:
JSX:
<div>
<p onClick={() => setTag('all')} className="products-select products-select-active">ALL PRODUCTS</p>
<FontAwesomeIcon icon="caret-down" size="2x" />
</div>
css:
.products-select {
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
.products-select-active {
background-color: #3A3A3A;
color: white;
}
Icon:
我该如何解决?
EDIT:
我刚刚使用css和JSX进行了向下箭头操作,它解决了我的问题。
EDIT 2:
解决方法
当您需要精确移动某些内容时,可以将transform
CSS属性与一个translate
值一起使用。例如,在这里您可以尝试
.products-select {
transform: translateY(15px);
}
这将使产品选择向下移动15像素,您可以将值调整为所需的值。 (也有translateX用于水平翻译。)
,尝试将box-sizing: border-box
添加到products-select
类中,如下所示:
.products-select {
box-sizing: border-box;
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
然后设置您的身高。 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。