微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何消除React JS中的Font Awesome Icon和段落之间的差距?

如何解决如何消除React JS中的Font Awesome Icon和段落之间的差距?

我正在尝试将图标caret-down的顶部与我的p底部对齐:

enter image description here

箭头和p之间有一个缝隙,我不知道如何摆脱这个缝隙。 我将p设置为margin-bottom: 0,但是图像的间隙仍然存在。 我的第二个猜测是将图标设置为负数margin-top,但目前为止仍然有效:

enter image description here

上图显示了当我用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:

enter image description here

我该如何解决

EDIT:

我刚刚使用css和JSX进行了向下箭头操作,它解决了我的问题。

EDIT 2:

@ lt1解决方效果很好。

解决方法

当您需要精确移动某些内容时,可以将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 举报,一经查实,本站将立刻删除。