按钮背景显示Bug：HTML/CSS开发时如何扩大按钮文字背景避免拥挤

问题原因与解决方案 #

你当前代码存在语法错误：padding: 12px 20 px; 里的20和单位px之间多了多余空格，浏览器无法正确识别这个水平内边距属性，是导致按钮左右背景区域过小、文字拥挤的核心原因。

你可以按照以下步骤调整：

• 先修复语法错误，删掉20和px之间的空格，修改为padding: 12px 20px;。padding属性的两个值分别对应上下、左右方向的内边距，数值越大，按钮的背景区域就越大。
• 如果修复后还是觉得文字拥挤，可以继续调大padding的数值：想要左右更宽松就调大第二个数值，想要上下更宽松就调大第一个数值，比如设置为padding: 14px 24px;就能得到更舒展的按钮效果。
• 可选优化：可以追加transition: all 0.3s ease;属性，搭配hover状态修改背景色的规则，能提升按钮的交互体验。

修正后的完整代码示例 #

.btns{
  margin-top: 20px;
  background: #d8d8d8;
  cursor: pointer;
  color: #191919;
  padding: 12px 20px; /* 已修复20和px之间的空格错误 */
  float: left;
  border:0;
  border-radius:20px;
  margin-left:10px;
}

如果需要更宽松的视觉效果，把水平padding调整到24-30px区间即可获得足够的留白，避免文字拥挤。

内容的提问来源于stack exchange，提问作者Stanciu Daniel