Come eliminare il divario tra Font Awesome Icon e il paragrafo in React JS?
Sto cercando di mettere il lato superiore dell'icona caret-down
allineato con il lato inferiore del mio p
:

C'è un divario tra la freccia e il p
, non so come sbarazzarmi di questo divario. Ho impostato p
con margin-bottom: 0
, ma il divario dell'immagine rimane ancora. La mia seconda ipotesi era di impostare l'icona con un negativo margin-top
, ma finora funziona solo:

L'immagine sopra mostra cosa succede quando imposto l'icona con margin-top: -10px
. Ho ancora un divario e questo è il più vicino possibile all'icona accanto p
, non importa quanto lo diminuisca margin-top
, questo è il limite.
Forse c'è qualcosa in queste icone che non conosco.
Un esempio del mio codice:
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:

Come posso risolverlo?
EDIT:
Ho appena creato la mia freccia verso il basso con CSS e JSX e ha risolto il mio problema.
EDIT 2:
La soluzione @ lt1 funziona alla grande.
Risposte
Quando devi spostare qualcosa in modo preciso, puoi utilizzare la transform
proprietà CSS con un translate
valore. Ad esempio, qui potresti provare
.products-select {
transform: translateY(15px);
}
Ciò sposterà la selezione dei prodotti verso il basso di 15 px, puoi regolare il valore in base a ciò di cui hai bisogno. (c'è anche translateX per una traduzione orizzontale.)
Prova ad aggiungere box-sizing: border-box
alla products-select
classe, in questo modo:
.products-select {
box-sizing: border-box;
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
E poi imposta la tua altezza. :)