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:

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;
  }
}
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.
Lascio due immagini che ben raffigurano l'anomalia.

Schermata_2021-04-18_alle_02.18.47.png

Schermata_2021-04-18_alle_02.20.59.png


Grazie per gli eventuali consigli