css - 调整 md-button 奇怪行为的高度

Question

我正在尝试调整 md-button 的高度，这很令人沮丧。我已将 元素硬编码为 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, 'max-heightwithline-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 .