Html 如何消除React JS中字体和段落之间的差距？

我正试图将图标

插入符号的顶部向下

与我的

p

的底部对齐：

箭头和

p

之间有一个间隙，我不知道如何消除这个间隙。 我将

p

设置为

margin-bottom:0

，但图像的间隙仍然存在。 我的第二个猜测是将图标设置为负的

页边距顶部

，但目前为止它只起作用：

上图显示了当我将图标设置为

边距顶部：-10px

时发生的情况。我仍然有差距，这是我能得到的最接近

p

的图标，无论我将

页边距顶部减少多少，这都是极限

也许这些图标有些我不知道的地方

我的代码示例：

JSX:

<div>
   <p onClick={() => setTag('all')} className="products-select products-select-active">ALL PRODUCTS</p>
   <FontAwesomeIcon icon="caret-down" size="2x" />
</div>

图标：


我怎样才能修好它

编辑：

我用css和JSX制作了自己的箭头，解决了我的问题

编辑2:

@lt1解决方案非常有效。
尝试将
框大小：边框框
添加到
产品选择
类中，如下所示：

.products-select {
    box-sizing: border-box;
    width: 155px;
    height: 46px;
    background-color: #F5F5F5;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 0;
}

然后设置您的身高。：）
 当您需要精确地移动某个对象时，可以使用带有
translate
值的
transform
CSS属性。例如，在这里您可以尝试

.products-select {
   transform: translateY(15px);
}

这将使产品选择向下移动15像素，您可以根据需要调整值。（还有用于水平平移的translateX。）

.products-select {
   transform: translateY(15px);
}