Höhe der md-Taste merkwürdiges Verhalten einstellen

Question

Ich versuche, die Höhe eines MD-Knopfes einzustellen, und es war ziemlich frustrierend. Ich habe das < Button-Container> -Element so programmiert, dass es 25 Pixel hoch ist. Das ist die Höhe, auf der ich die Buttons haben möchte. Allerdings läuft die Hover-Animation noch über diese Höhe, etwa so:

Allerdings, wenn ich hineingehen und 25px Höhe auf die Tasten selbst hinzufügen, wie es scheint, den Inhalt zu kompensieren, etwa so:

Wer weiß, wie man einen Stil schreibt, der dieses Verhalten behebt? Ich bin mir nicht ganz sicher, warum eine Höhe in die Schaltfläche codiert wird, so dass der Text auf den Grund fällt.

Hier ist mein html:

<div id="buttons-container"> 

    <button 
     md-button 
     id="add-track-button" 
     (click)="addTrack()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Track</span> 
    </button> 

    <button 
     md-button 
     id="delete-track-button" 
     [disableRipple]="true" 
     [disabled]="this.tracksArray.length === 0" 
     (click)="toggleDeleteTrackMode()" 
    > 
     <md-icon>delete</md-icon> 
     <span>Delete Tracks</span> 
    </button> 

    <button 
     md-button 
     id="add-marker-button" 
     [disableRipple]="true" 
     (click)="toggleAddMarkerMode()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Marker</span> 
    </button> 

    <button 
     md-button 
     id="add-frame-span-button" 
     [disableRipple]="true" 
     (click)="toggleAddFrameSpanMode()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Span</span> 
    </button> 

</div> 

Hier ist meine CSS:

#buttons-container { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; 
    align-items: center; 
    flex-wrap: nowrap; 
    height: 25px; 
    color: black; 
    background-color: grey; 

    button { 
     font-size: 10px; 
     // If this line is commented out, the text is aligned fine but the hover animation overflows 
     // If it isn't, the content offsets to the bottom like in the picture above 
     height: 25px; 
     padding: 0px 2px; 

     md-icon { 
      font-size: 18px; 
      height: 18px; 
      width: 18px; 
     } 
    } 

    #add-marker-button { 
     md-icon { 
      color: $marker-color; 
     } 
    } 

    #add-frame-span-button { 
     md-icon { 
      color: $frame-span-color; 
     } 
    } 
} 

Answer 1

Verwenden min-height, ‚max-height with Line-height` das gewünschte Ergebnis zu erhalten.

Hier ist das Inline-Beispiel.

<md-button style="min-height:25px;background-color:yellow"> Button 1</md-button> 
<md-button class="custome-button" style="min-height:25px;max-height:25px;background-color:red; text-align:center;line-height:25px"> Button 2</md-button> 

Hier ist die Arbeits codepen.