Question

请查看更好地解释我的问题的提琴手链接 http://jsfiddle.net/vivekanandaJE/hx2wpggv/2/

h2{
  color:#fff;
  background:#000;
  display:inline;/* inline block spoils the  gap between lines*/
  line-height:30px;
}

我遇到的所有解决方案都将属性更改为内联块或其他内容。这并没有解决我的问题。

要恢复：

我想减少背景颜色高度，我不能把内联块作为我需要间隙，每行之间没有背景。我想在所有浏览器中支持左右两端的黑色背景间隙。

Answer 1

如果你的意思是摆脱H2元素和页面上其他元素之间的间隙，那么你真正需要做的就是删除h2元素上的边距和填充，并使行高与字体高度。（见下文）

h2{
    color:#fff;
    background:#000;
    line-height:30px;
    font-size:32px;
    margin:0;
    padding:0
}

这将允许H2和任何前面或后面的元素相互“接触”而中间没有额外的空间。

但是，如果你在谈论当一个H2行包裹在其容器元素内时出现的“空间”，那么这是由你正在使用的字体的度量引起的视觉效果。目前处理这些问题的唯一方法是使用浏览器特定的字体扩展程序（Google搜索字体功能设置），并查看http://caniuse.com/#feat=font-feature是否可以在特定目标浏览器上使用它们。

您必须调整该字体设计者所做的字体设置组合，即使这样，您也只能这么做。如果字体在每个字母的上方和下方留下空间以允许下降等等，那么您将无法显着改变它。当然，您可以随时设计自己的字体，每个字母都可以触及顶部和底部，并且有一些工具可以帮助您实现这一点。

Answer 2

将h2元素包装在div中。使用以下css：

h2{
    color:#fff;
    background:#000;
    display:inline;
    font-size:1rem;
}

div{ line-height:30px; }

使用字体大小h2控制线条的高度，使用line-height或div控制线条之间的间隙。

内联元素的行高，不将属性更改为内联块

2 个答案: