SVG内嵌Button设置line-height无效问题求助

哈哈，这个问题我之前复刻网站组件时也踩过坑！其实核心原因是line-height属性的作用对象是行内内容——比如文本、图标这类能形成“行框”的元素，空按钮里没有任何行内内容，自然就没东西让line-height去作用啦。而有文本的按钮里，文本本身会生成行框，line-height就会通过这个行框来影响按钮的高度。

下面给你几个解决思路，都是实际项目里好用的方案：

方案1：直接设置固定高度/内边距（最推荐） #

既然没有文本撑高度，那就直接给空按钮指定明确的尺寸，比依赖line-height靠谱多了：

/* 给无文本的按钮设置固定高度 */
.Button.VoteButton:empty {
  height: 32px; /* 按需调整成你要的高度 */
  width: 32px; /* 如果是正方形按钮可以加这个 */
}

/* 或者用内边距撑开，更灵活适配不同场景 */
.Button.VoteButton:empty {
  padding: 8px; /* 上下左右内边距，自行调整 */
}

方案2：给按钮加个隐形占位内容 #

如果非要用line-height，那可以给空按钮塞一个看不见的行内元素当“载体”，比如零宽空格或者隐形span：

<!-- 用零宽空格占位 -->
<button class="Button VoteButton">&#8203;</button>

<!-- 或者用隐形span -->
<button class="Button VoteButton"><span style="visibility: hidden;">&#8203;</span></button>

这样按钮里就有了行内内容，line-height就能正常生效了。

方案3：检查SVG的布局属性 #

因为按钮嵌套在SVG里，要确保SVG的display属性不会干扰按钮的盒模型。可以给SVG设置合适的display值：

.ContentItem-actions svg {
  display: inline-block; /* 或者block，按需选择 */
  vertical-align: middle; /* 避免和其他元素错位 */
}

其实知乎的无文本按钮（比如点赞、收藏按钮）都是用固定宽高+内边距来控制尺寸的，很少依赖line-height，毕竟line-height本来就是为文本排版设计的属性～

内容的提问来源于stack exchange，提问作者Billy Chen