html - 更改 标签的垂直高亮区域

Question

在 HTML 中，我如何更改 <mark> 的彩色区域的填充/高度标签。使用标准 bootstrap 2 jumbotron h1 中的 roboto slab 字体，突出显示的区域太高并与上面的线重叠，并且宽度上没有填充。

http://jsfiddle.net/Uf3Cq/5/

bootstrap jumbotron 将 line-height 设置为 1。看起来我可以将其调整为 1.3 以使其不重叠，但我很好奇我可以做些什么来使彩色区域也不太高。看起来垂直间距中有一些净空，可以稍微修剪一下。

Answer 1

水平填充问题相当微不足道:只需添加它，例如

mark { padding: 0 0.1em; }

0.1em 的值应该足以防止字母接触彩色区域的左边缘或右边缘，但当然你可以把它做得更大。上面的规则也将垂直填充设置为零，但这是默认值。

此处垂直方向上的任何内容都不是由垂直填充创建的，除非您在样式表中的某处设置了它。相反，它是元素框的高度。它可能因浏览器而略有不同，并且在 CSS 规范中有意将计算保留为特定于浏览器。 line-height只是为其设置一个下限。

在我的测试中，使用 Google Web Fonts 的 Roboto Slab，我看不到重叠。在 Chrome 中，如果字符有下部，如字母“q”，则彩色区域仅会触及上一行中的字符。所以我猜你可能指的是相互接触的彩色区域，如果你有 mark连续行上的元素。 – 如果您设置了 line-height ，然后你会看到重叠，如果 line-height值很小，但解决方案应该是显而易见的。机器人

对此似乎没有任何简洁明了的解决方案，但如果您可以接受非包装 mark元素(即 mark 元素内没有换行符)，那么您可以将它们设为内联框并设置 height将它们设置为适当的小值，并设置 line-height到相应的值:

mark { display: inline-block; 
       height: 1.15em;
       line-height: 1.15; }

(对于内联元素，height 属性被忽略。对于内联 block 元素，它设置实际框的高度。)