Ciao ragazzi,
questo è il mio primo messaggio nel forum pertanto, innanzitutto, ciao!
Venendo al mio quesito, sto costruendo una pillola libreria di componenti in React (ma questo è solo il contesto, non ha a che vedere con il mio problema) e sono incappato in un comportamento un pò bizzarro (almeno a prima vista) che non sono riuscito a spiegarmi.
In pratica ho un componente Button che ha come classe CSS base la seguente dichiarazione:
Nella pagina di esempio della libreria ho disposto 3 di questi pulsanti dentro ad un <div> e ho notato che, se nel pulsante è presente l'icona, tutti e 3 risultano ben allineati altrimenti quello senza icona viene posizionato leggermente più in basso nella riga.codice:.Button { align-items: center; display: inline-flex; border: 1px solid transparent; border-radius: var(--button-border-radius); cursor: pointer; font-family: inherit; font-weight: 500; justify-content: center; line-height: 1; outline: none; transition-duration: var(--button-transition-duration); transition-timing-function: linear; user-select: none; white-space: nowrap; &:enabled:active { opacity: .7; } &:disabled { cursor: default; } > svg, > img { height: 1em; width: 1em; } }
Lascio due immagini che ben raffigurano l'anomalia.
Grazie per gli eventuali consigli