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
何かを正確に移動する必要がある場合は、transform
CSSプロパティを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;
}
そして、身長を設定します。:)