Html 如何设置包含svg的链接的样式并去掉额外的4px？

我想在

将
显示：内联块添加到

在

但是，这是解决这个问题最惯用的方法吗



正文{
利润率：100像素；
}
.集装箱{
背景色：#ccc；
边缘顶部：8px；
边缘底部：40px；
}
a、 焦点{
盒影：0 0px 4px#f14848；
}
a、 内联块{
显示：内联块；
}
a、 桌子{
显示：表格；
}
svg{
显示：块；
}

无焦点
专注地
无焦点（内联块）
带焦点（内联块）
无焦点（表）
有焦点（表格）
垂直对齐：中间应该使内联块示例看起来像表示例


正文{
利润率：100像素；
}
.集装箱{
背景色：#ccc；
边缘顶部：8px；
边缘底部：40px；
}
a、 焦点{
盒影：0 0px 4px#f14848；
}
a、 内联块{
显示：内联块；
垂直对齐：中间对齐；
}
a、 桌子{
显示：表格；
}
svg{
显示：块；
}

无焦点
专注地
无焦点（内联块）
带焦点（内联块）
无焦点（表）
有焦点（表格）
将方框阴影应用于a.focus svg，我相信这也是实现结果的最有效方法


正文{
利润率：100像素；
}
.集装箱{
背景色：#ccc；
边缘顶部：8px；
边缘底部：40px；
}
a、 焦点{
显示器：flex；
对齐项目：居中；
宽度：25%；
盒影：0 0px 4px#f14848；
}
a、 内联块{
显示：内联块；
}
a、 桌子{
显示：表格；
}
svg{
显示：块；
}

无焦点
专注地
无焦点（内联块）
带焦点（内联块）
无焦点（表）
有焦点（表格）
您需要添加
垂直对齐：顶部到
a
。由于在
内联块
中，元素位于
基线
，因此4px实际上是字符下行器的保留空间


正文{
利润率：100像素；
}
.集装箱{
背景色：#ccc；
边缘顶部：8px；
边缘底部：40px；
}
svg{
显示：块；
}
a{
显示：内联块；
/*加上这个*/
垂直对齐：顶部；
}
a、 焦点{
盒影：0 0px 4px#f14848；
}

无焦点
专注地
是否要插入框阴影？或者目标是让它看起来像显示表的结果，而不实际使用显示表？@ksav Nope。我想使用问题中描述的
框阴影
样式。我认为您可能误读了问题哈哈，这很有可能。不幸的是，这种方法限制了在图标旁边添加链接文本的可能性。已修改以适应图标旁边的链接文本
<a href="#">
  <svg width="32px" height="32px" viewBox="0 0 32 32" focusable="false" role="img" aria-label="GitHub">
    <path d="M15.846 4C9.304 4 4 9.148 4 15.5c0 5.08 3.394 9.388 8.102 10.91.593.105.809-.25.809-.555 0-.273-.01-.996-.016-1.955-3.295.694-3.99-1.542-3.99-1.542-.54-1.329-1.316-1.682-1.316-1.682-1.076-.713.081-.7.081-.7 1.19.083 1.815 1.186 1.815 1.186 1.057 1.757 2.772 1.25 3.448.956.107-.743.413-1.25.752-1.538-2.63-.29-5.397-1.276-5.397-5.683 0-1.255.462-2.281 1.22-3.085-.122-.29-.529-1.46.116-3.043 0 0 .995-.31 3.258 1.179a11.67 11.67 0 012.966-.388c1.006.005 2.02.132 2.966.388 2.261-1.488 3.254-1.18 3.254-1.18.647 1.584.24 2.753.118 3.044.76.804 1.218 1.83 1.218 3.085 0 4.418-2.77 5.39-5.41 5.674.426.355.805 1.057.805 2.13 0 1.537-.015 2.777-.015 3.154 0 .308.214.665.815.553 4.703-1.524 8.095-5.83 8.095-10.908C27.694 9.148 22.39 4 15.846 4" fill-rule="evenodd">
    </path>
  </svg>
</a>

a.focus { /* not using :focus for demo purposes */
  box-shadow: 0 0 0px 4px #f14848;
}
svg {
  display: block; /* this is to get rid of the extra 4px at the bottom */
}