Html 将样式应用于锚元素会导致内容意外扩展

这是添加样式之前的页面：

这是后来的事：

我不确定是什么导致了这个错误。我唯一能确定的是，当我应用背景色时，整个事情都会变得古怪。这个想法是为了得到一个白色背景的下载按钮，这样用户就可以看到它了。但是，该元素似乎从其父元素继承了高度值。这个问题有没有简洁明了的解决方法

：根{ -默认宽度：600px； } * { 框大小：边框框； } 身体{ 背景色：白烟； 保证金：0； 字体系列：开放式Sans，无衬线； } h1、h2、h3、h4、h5、h6{ 字体系列：Comfortaa，无衬线； } a{ 文字装饰：无； 颜色：黑色； } 标题{ 位置：相对位置； 保证金：0自动； 填充：10px； 文本对齐：居中； 背景色：白色； 高度：600px； } 收割台h1{ 位置：绝对位置； 顶部：0；底部：0；右侧：0；左侧：0； 保证金：0； 线高：540px； } 标题p{ 位置：绝对位置； 顶部：0；底部：0；右侧：0；左侧：0； 保证金：0； 线高：620px； } 标题a{ 位置：绝对位置； 顶部：0；底部：0；右侧：0；左侧：0； 保证金：0； 线高：720px； } 主要{ 保证金：0自动； 宽度：var默认宽度； } .标题导航{ 文本对齐：右对齐 } .收割台导航ul{ 列表样式类型：无； 保证金：0； } .头导航李{ 显示：内联块； 填充：20px； 过渡：背景色0.1s缓进输出0s，颜色0.1s缓进输出0s； } .标题导航李：悬停{ 背景色：暗灰色； 颜色：白色； } .重要按钮{ 颜色：蓝色； 背景色：白烟； } 圣经 欢迎来到Scriptura 卓越的网络笔记软件

什么是脚本 Scriptura从最初下载时的文本编辑功能开始；但是，随着您需求的扩大，您可以添加越来越多的内容，如：

自定义注释模板 可定制主题 数据显示表格、单元格、分组列等。 还有更多！

---

对于给定“绝对位置”的锚定标记，这意味着它将使用“相对位置”元素查找其父元素，并使用“相对位置”元素获取父元素的宽度和高度

因此，如果您进行以下更改，它看起来像是要求

header a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 16px;
}

---

我没有接受这个答案，因为我希望能引起更多的关注。我还要求一些更简洁明了的东西。