WordPress中CSS自定义按钮高度无法调整问题求助

解决按钮高度过高的问题 #

问题背景 #

使用按钮生成器创建带图标按钮并部署到WordPress站点后，按钮显示过高，调整padding仅能改变宽度，无法缩短高度，所用CSS代码如下：

.css-button {
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
    border: solid 1px #735a46;
    text-shadow: 1px 1px 0px #735a46;
    box-shadow: inset 1px 1px 0px 0px #735a46;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: Arial;
    font-weight: bold;
    font-style: italic;
    background: linear-gradient(180deg, #735a46 10%, #e0cea6 100%);
    display: inline-flex;
    align-items: center;
    padding: 0;
}
.css-button:hover {
    background: linear-gradient(180deg, #e0cea6 10%, #735a46 100%);
}
.css-button-text {
    position: relative;
    padding: 5px 18px;
}
.css-button-icon {
    position: relative;
    border-right: 1px solid #ffffff29;
    box-shadow: inset rgb(0 0 0 / 14%) -1px 0 0;
    padding: 5px 10px;
}

解决思路 #

• 调整垂直内边距：按钮高度主要由内部文本和图标的上下padding决定，将.css-button-text和.css-button-icon的上下padding从5px缩小到更小的值（比如2px），直接减少垂直方向的空间占用。
• 控制行高：给按钮、文本、图标元素添加line-height: 1;，避免继承父元素的大行高导致额外垂直空间。
• 可选：设置固定高度：如果上述方法效果不佳，可直接给.css-button添加固定height属性（比如height: 28px;），配合align-items: center确保内容垂直居中。

修改后的CSS示例 #

.css-button {
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
    border: solid 1px #735a46;
    text-shadow: 1px 1px 0px #735a46;
    box-shadow: inset 1px 1px 0px 0px #735a46;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: Arial;
    font-weight: bold;
    font-style: italic;
    background: linear-gradient(180deg, #735a46 10%, #e0cea6 100%);
    display: inline-flex;
    align-items: center;
    padding: 0;
    line-height: 1; /* 控制行高 */
    /* height: 28px; 可选：固定高度 */
}
.css-button:hover {
    background: linear-gradient(180deg, #e0cea6 10%, #735a46 100%);
}
.css-button-text {
    position: relative;
    padding: 2px 18px; /* 减少上下内边距 */
    line-height: 1;
}
.css-button-icon {
    position: relative;
    border-right: 1px solid #ffffff29;
    box-shadow: inset rgb(0 0 0 / 14%) -1px 0 0;
    padding: 2px 10px; /* 减少上下内边距 */
    line-height: 1;
}

内容的提问来源于stack exchange，提问作者K.Kessler