React JSのFontAwesomeアイコンと段落の間のギャップをなくす方法は?

Aug 22 2020

私は、アイコンの上部側に置くしようとしていますcaret-down私の下側に並んにp

矢印との間にギャップがありpます。このギャップを取り除く方法がわかりません。で設定pしましたmargin-bottom: 0が、画像のギャップが残っています。私の2番目の推測は、アイコンを負の値に設定する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ソリューションはうまく機能します。

回答

1 lt1 Aug 22 2020 at 01:44

何かを正確に移動する必要がある場合は、transformCSSプロパティをtranslate値とともに使用できます。たとえば、ここで試すことができます

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

これで製品が移動します。15px下に選択すると、必要に応じて値を調整できます。(水平移動用のtranslateXもあります。)

AminDarian Aug 22 2020 at 01:44

次のよう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;
}

そして、身長を設定します。:)