仅带有SVG图标的按钮的高度减小

Question

我有一个带有文本和文本的按钮+ SVG。现在，并排渲染它们可以使我看到带有文本+ SVG的控件的高度比仅带有SVG的按钮的高度略高。

现在，我检查了两种情况下CSS属性是否相同。我该如何解决？

下面是我对Button的用法>

<ButtonSolid
    onClick={handleClick}
    btnType={btnType}
    btnStyle={btnStyle}
    type={htmlType}
    {...rest}
>
    {icon ? getIcon(btnStyle, btnType) : null}
    {children}
</ButtonSolid>
让我们假设getIcon返回<svg>

CSS在下面

button{
    box-sizing: border-box;
    cursor: pointer;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    font-size: 16px;
    transition: color 0.3s ease-in;
    &:focus {
        outline: 0;
    }
}

我有一个带有文本和文本的按钮+ SVG。现在，并排渲染它们可以使我看到带有文本+ SVG的控件比单独使用SVG的按钮具有更高的高度。现在，我检查了是否没有CSS ...

Answer 1

您参考下面的代码将固定高度设置为按钮。