在css中忽略了锚点上的填充

我不熟悉编码，所以请耐心等待，但在我正在处理的页面中，我所做的按钮上的填充被忽略，导致按钮与相邻元素重叠。值得注意的是，我正在使用锚制作按钮

HTML

---

这是我发布的第一个问题，希望一切看起来都很好。提前谢谢。

我在没有所有变量的情况下试过了

标记是内联元素-它们不能高于行本身，因此这是重叠的prolem。添加显示：内联块；要防止这种情况发生，请连接到atag，或使用相应的线高度，即足够大以适合填充a标签的高度

.classicbtn{ 背景色：fb7； 边界半径：2em； 框大小：边框框； 颜色：白色； 字号：1.2rem； 字体大小：粗体； padding:3rem 4rem；//这是被忽略的内容。背景换行到下一个div中 保证金：0自动； 文字装饰：无； 文本对齐：居中； 显示：内联块； } 测试测试

测试签名测试

---

测试测试添加显示内联块。添加您甚至可以根据需要添加页边距

.classicbtn{ 背景色：红色； 边界半径：2em； 框大小：边框框； 颜色：$白色； 字号：1.2rem； 字体大小：粗体； 填充：1rem4rem； 文字装饰：无； 文本对齐：居中； 显示：内联块； }

---

注册使用浮动：左；在你的css中

.classicbtn{ 背景颜色：绿色； 边界半径：2em； 框大小：边框框； 颜色：白色； 字号：1.2rem； 字体大小：粗体； 填充：1rem4rem； 保证金：0自动； 文字装饰：无； 文本对齐：居中； 浮动：左； } 注册

<a class = "classicbtn">Sign Up</a>

.classicbtn {
    background-color: $primary-color;
    border-radius: 2rem;
    box-sizing: border-box;
    color: $white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem 4rem; //this is what is ignored. Background wraps into the next div
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    &:hover {
      background-color: $button-hover;    
    }
    &:active {
      background-color: $button-active;
    }
  }