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

Question

我试图将图标 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:

@lt1 解决方案效果很好。

Answer 1

尝试将 box-sizing: border-box 添加到 products-select class，如下所示：

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

然后设置你的身高。 :)

Answer 2

当您需要精确移动某物时，您可以使用 transform CSS 属性和 translate 值。例如，在这里你可以试试

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

这会将products-select向下移动15px，您可以根据需要调整该值。（还有用于水平翻译的 translateX。）

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

How to eliminate gap between Font Awesome Icon and paragraph in React JS?

html

css

jsx

reactjs

font-awesome-5