line-height 小于 font-size 时的边框

Question

我有一个元素（例如<p>或<h1> ），其line-height属性小于font-size属性。 这会强制元素内的文本粘在它外面。 不幸的是，我不能改变它，因为它会改变页面的设计。

这本身就可以，但我必须在这个元素周围添加一个border （或outline ）。 现在正如预期的那样，边框将环绕元素，而不是文本，这会创建类似this的内容。

现在我可以单独编辑每个边框，但这真的很累，因为我必须在网站上的很多地方实现它。

我想到的另一个解决方案是display: inline 。 这将边框直接包裹在文本周围，但是它在多行元素上开始表现得很奇怪。

这里的例子。

还有其他方法可以使边框与文本的高度相同吗？ 我对 css 和 js 解决方案都持开放态度。

Answer 1

您可以尝试将此添加到您的 CSS: outline-offset: 15px; 您可能需要根据您的情况选择不同的号码。