Disallineamento Pulsanti

[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.