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

编程问答 2022-08-15

问题描述

我正在尝试将图标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;
}

然后设置您的身高。 ：）

font-awesome-5htmljsxjsxjsxreactjsreactjsreactjsreactjs