链接正在添加边距，即使我尝试删除边距答案

【问题标题】：Link is adding a margin, even when I try to remove margin链接正在添加边距，即使我尝试删除边距
【发布时间】：2020-06-15 15:37:01
【问题描述】：

箭头是一个链接，即使我去掉了边距，像这样：margin:0;它仍然创造了那个空间。我知道这是链接，因为我将其删除以查看。这是链接代码：

<a href="#desc" class="bottombutton"><i class="fas fa-angle-double-down" style="font-size:36px;" id="downbtn"></i></a>

这是我的 CSS：

#downbtn{
  position:relative;
  bottom:45px;
  color:white;
  left:50%;
  margin:0;
  padding:0
  transform:translate(-50%,-50%);
}

我是否缺少一些东西来删除空格？

【问题讨论】：

删除链接后“白条”是否消失？边距不适用于内联元素，您必须将其设为 display: inline-block;。在你的情况下，我认为这不是问题。
是的，当我删除链接时，白条消失了
当您在相对元素上使用 translate 和 bottom 时，它仍会在布局中保留其空间（即白条）。所以当你翻译它时，你只是在移动链接而不是容器。尝试将背景与褪色的黑色匹配或使用绝对位置，以免占用布局空间。
将链接或 i 更改为绝对位置？
也许您的页脚顶部有边距？

标签： html css whitespace margin

【解决方案1】：

将元素设为absolute，将其设为inline-block，并将translate 更改为translateX。不要忘记父级上的position: relative;（您可能已经知道）。

#downbtn {
  position: absolute;
  display: inline-block;
  bottom: 45px;
  color: white;
  left: 50%;
  margin: 0;
  padding: 0; 
  transform: translateX(-50%);
}

【讨论】：