Html “我的按钮”上的文本粘贴在其填充的右下角

当我试图开发一个干净的侧边栏在我的网站上使用时，我注意到我的按钮中的文本被粘在了它们填充的右下角。我还注意到，当我删除他们边界上的样式时，问题就消失了

我尝试了几种可能的解决方案，发现了同样的结果

正文{
背景色：#ddd；
}
* {
字体系列：无衬线；
}
输入[类型=按钮]{
位置：相对位置；
顶部：20px；
左：25px；
边缘底部：20px；
边界半径：12.5px；
边界：无；
填充顶部：15px；
左侧填充：100px；
过渡时间：0.7s；
}
输入[类型=按钮]：悬停{
背景色：#00aaff；
边框颜色：白色；
颜色：白色；
}
#边栏{
背景：线性梯度（5900ff、8000ff、ae00ff）；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：220px；
身高：100%；
}

---

默认情况下，按钮元素内的文本居中。但是，如果仅在一侧应用填充，文本将显示为被推到另一侧。删除填充，或者也添加右侧填充，以忽略此效果