html - 如何在不增加 大小的情况下使用 'line-height'

Question

我正在尝试复制 www.codecademy.com 的标题，但我遇到了“升级到专业版”按钮的问题。根据我正在学习的教程，我只是使用 a 因为它纯粹是视觉的。

为了使 <span> 居中, 我用 line-height: 50px 50px 是它所在的标题的高度。在我添加边框之前一切都很好......使用 line-height在代码中，边框采用父级的高度(标题为 50px)而不是包装 <span>就像没有 line-height 一样.

将 JSFiddle 结果屏幕放大以了解我的意思:

JSFiddle with line-height

JSFiddle WITHOUT line-height

行高是我可以垂直居中跨度的唯一方法，没有其他方法对我有用。

如何在保持行高的同时将边框环绕在 span 周围？

Answer 1

取而代之的是:

     <span id="span1">Catalog</span>
     <span id="span1">Community</span>
     <span id="spanUpgrade">Upgrade to Pro</span>

你可以这样做:

     <span class="span1">Catalog</span>
     <span class="span1">Community</span>
     <span class="span1"><span id="spanUpgrade">Upgrade to Pro</span></span>

span1 是菜单项，spanUpgrade 是特定于元素的内容。

https://jsfiddle.net/s0Lw4dhc/1/