在HTML中，如何更改<mark>标记的彩色区域的填充/高度。我的roboto slab字体位于标准bootstrap 2 jumbotron h1中，突出显示的区域太高而且与上面的线重叠，并且宽度上没有填充。
bootstrap jumbotron将行高设置为1.看起来我可以将其调整为1.3以使其不重叠，但我很好奇我可以做些什么来使彩色区域不那么高好。看起来在垂直间距中有一些空间可以稍微修剪一下。
答案 0 :(得分：1)
水平填充问题相当简单：只需添加它，例如
mark { padding: 0 0.1em; }
0.1em的值应足以防止字母触及彩色区域的左边缘或右边缘，但当然可以使字母更大。上面的规则也将垂直填充设置为零，但这是默认值。
无论你在垂直方向上拥有什么，都是而不是由垂直填充创建，除非你将它设置在样式表的某个位置。相反，它是元素盒子的高度。它可能会因浏览器而略有不同，并且计算有意在CSS规范中保留了特定于浏览器的功能。 line-height只是设置了它的下限。
在我的测试中，使用Google Web Fonts的Roboto Slab，我无法看到重叠。在Chrome中，如果字符有下降字符，则彩色区域只触及上面一行中的字符，如字母“q”。所以我猜你可能指的是相互接触的彩色区域，如果你在连续的行上有mark个元素。 - 如果您设置了line-height，然后，您会看到重叠，如果line-height值很小，那么解决方案应该是显而易见的。 ROBO
似乎没有任何简洁明了的解决方案，但 if 你可以接受非包装mark元素（即mark内没有换行符然后你可以使它们成为内联框并将height设置为适当的小值，并将line-height设置为相应的值：
mark { display: inline-block;
height: 1.15em;
line-height: 1.15; }
（对于内联元素，忽略height属性。对于内联块元素，它设置实际框的高度。）