我的 HTML 按钮内的文本超出了按钮答案

【问题标题】：The text inside my HTML button goes outside the button我的 HTML 按钮内的文本超出了按钮
【发布时间】：2021-01-20 09:22:26
【问题描述】：

我的 HTML 网页上有一个“下载”按钮，并为它设置了一些属性。

每当我刷新页面时，按钮都会出现这样的情况，很少见：

按钮外的文字

但是，它看起来像这样，这是正常外观的按钮：

普通按钮

.navbar-download-btn {
  position: absolute;
  right: 4%;
  top: 5.7%;
  color: white;
  background-color: blue;
  border: 2.2px solid white;
  padding: 0.8%;
  border-radius: 3.5px;
  outline: none;
  cursor: pointer;
  font-weight: bolder;
  font-family: Noto Sans KR, sans-serif;
  letter-spacing: 0.7px;
  transition: 0.7s;
}

&lt;a href="#Download"&gt;&lt;button class="navbar-download-btn nonindex"&gt;Download&lt;/button&gt;&lt;/a&gt;

【问题讨论】：

请提供minimal reproducible example，以便我们为您提供帮助。
欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。发布 CODESE，而不仅仅是图片。 “我设置了一些属性”——我们无法猜到你在那里做了什么
我添加了代码。
你的班级是navbar-download-btn-nonindex，但你的CSS是navbar-download-btn
谢谢@NVRM，它真的帮助了我

标签： html css button padding htmlbutton

【解决方案1】：

我认为下载按钮的填充可能有问题，从右侧增加填充并尝试在其他浏览器中运行此代码，这对我来说太早了，但有时它可能只是你的浏览器...

【讨论】：

【解决方案2】：

text-align: center;
margin-right:

【讨论】：

请在您的回答中提供更多上下文，解释他们的作用，
尝试将 text-align 设置为 center 并将 margin-right 设置为 10px