Disallineamento Pulsanti

[Aernom]

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:

.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

[Aernom]

Uhm... Dopo alcuni test credo di aver capito l'inghippo.
Nel caso del pulsante senza icona l'allineamento all'interno del div viene risolto sulla sua baseline, mentre quando c'è l'icona l'allineamento avviene rispetto alla base dell'elemento più alto quindi nel mio caso l'icona. Pertanto la baseline del secondo pulsante si allinea alla base dell'icona del primo e del terzo pulsante.
Non so se mi sono spiegato .

Convertendo il pulsante ad inline-block il testo torna, giustamente, allineato alla baseline (ma l'allineamento verticale dell'icona svacca, anche con "vertical-align: middle").

[KillerWorm]

Ciao e benvenuto, non so se già hai risolto anche col secondo problema, ad ogni modo è difficile riprodurre il problema basandosi sul solo codice postato; nel caso, posta un link alla pagina in questione, se possibile, o magari predisponi un esempio minimo riproducibile usando qualche playground (uno tra tanti, CodePen), così sarà più semplice ricevere aiuto.

Buon proseguimento

[Aernom]

Ciao e benvenuto, non so se già hai risolto anche col secondo problema, ad ogni modo è difficile riprodurre il problema basandosi sul solo codice postato; nel caso, posta un link alla pagina in questione, se possibile, o magari predisponi un esempio minimo riproducibile usando qualche playground (uno tra tanti, CodePen), così sarà più semplice ricevere aiuto.

Buon proseguimento

Ciao Killer,
grazie della risposta.
Ecco il link al playground di prova (ho eliminato tutti gli stili, animazioni e orpelli vari per semplificare la lettura).

https://codesandbox.io/s/button-test...le=/index.html

Come vedi nel caso del pulsante senza icona l'allineamento avviene sulla baseline, mentre se l'icona è presente l'allineamento avviene rispetto alla base della content-box.
Credo non ci sia nulla da fare (evidentemente questo è il comportamento predefinito degli elementi inline-flex) ma chiaramente se hai qualche dritta e mi sbaglio ben venga!

Chiaramente potrei wrappare il tutto in una flexbox con align-items: center, oppure settare tutti i pulsanti con vertical-align: middle, ma ero proprio curioso di capire il perchè di questo comportamento degli elementi inline-flex con un classico container block.

[KillerWorm]

Ho visto, non ti so dire molto di più di quanto hai già constatato tu stesso. Si tratta del calcolo delle altezze degli elementi inline e altre relative proprietà che influiscono sull'allineamento verticale. Vedi documentazione 10.8. Line height calculations: the line-height and vertical-align properties

Da quel che ho provato, applicando vertical-align:middle (o top) alla classe .Button sembra risolvere.