更改<mark>标记的垂直高亮显示区域

Question

在HTML中，如何更改<mark>标记的着色区域的填充/高度。在我的roboto平板字体在标准引导程序2 jumbotron h1中，突出显示的区域太高并且与上面的线重叠，并且在宽度上没有填充。

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

自举的超大屏幕设置为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属性被忽略用于在线块元件，它设置的高度实际箱子）。