调整MD按钮的奇怪行为的高度

Question

我想调整一个MD按钮的高度，这是相当令人沮丧。我已将< button-container>元素硬编码为25像素高，这是我希望按钮的高度。然而，悬停动画仍然溢出了这个高度，就像这样：

然而，当我进去25px的高度添加到按钮本身，似乎抵消的内容，就像这样：

任何人都知道一种写法可以解决这种行为？我不太确定为什么硬编码高度到按钮导致文本下降到底部。

这里是我的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> 

这里是我的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

使用min-height，“最大高度with线height`得到期望的结果。

这是内联样式示例。

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

这里是工作codepen。