Javascript <；a>；svg周围的链接行为异常

在我的网站中，我有svg图标，我使用了以下脚本：

那很好

所以我用标签包装了我的图标：

 <a href="https://open.spotify.com/" target="_blank" class="svg-link"><img src="<?php bloginfo('template_url');?>/svg/play-white.svg"  class="svg"></a>

但这会产生这种输出：

这是突出显示的firebug的快照

橙色部分覆盖灰色部分。我将灰色设置为高度60px。svg也是60px。项目上没有空白或空白

我的意思是我可以做溢出：隐藏在灰色分区上。但我想知道是否有更优雅的方式，链接只有svg的大小，而不是更高

---

多谢各位

您可能对z-index标记感兴趣。

---

这是我的工作示例：

  <div class="col-md-2 col-sm-3 svg-link-wrapper">
     <a href="#musik" class="svg-link"><img src="icon.svg"  class="svg"></a>
  </div>

.svg-link {
  display: inline-block;
  height: 60px;
}

.svg-link-wrapper {
    text-align: right;
    height: 60px;
 }

.svg链接{
显示：内联块；
高度：60px；
}
.svg链接包装器{
文本对齐：右对齐；
高度：60px；
}

我刚刚发现有更好的解决方案！ 如果将背景图像作为SVG提供给标记，请设置高度和宽度并准备就绪

a .svg-link { 
                background-image: url(./svg/musik.svg);
                height: 45px;
                width: 45px;
            }

---

尝试使用

display:inline block

或

display:block

来显示

a

标记，而不使用进一步的CSS规则。这只是猜测：可能是一些错误的

float

ing，或者是一个不合适的

display

属性。你能发布应用于它的结果HTML和CSS吗？3Dos写的东西对我很有用！非常感谢：）请发一封邮件。