1

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

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

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

4

1 回答 1

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属性被忽略。对于内联块元素，它设置实际框的高度。）

于 2013-10-03T05:55:09.790 回答