Come eliminare il divario tra Font Awesome Icon e il paragrafo in React JS?

Aug 22 2020

Sto cercando di mettere il lato superiore dell'icona caret-downallineato 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 pcon 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

1 lt1 Aug 22 2020 at 01:44

Quando devi spostare qualcosa in modo preciso, puoi utilizzare la transformproprietà CSS con un translatevalore. 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.)

AminDarian Aug 22 2020 at 01:44

Prova ad aggiungere box-sizing: border-boxalla products-selectclasse, 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. :)