CSS：删除较大文本上的行高（前导）答案

【问题标题】：CSS: Remove Line Height (leading) on larger textCSS：删除较大文本上的行高（前导）
【发布时间】：2012-11-21 23:21:09
【问题描述】：

如何从强制跨度中删除前导，以便 << 上下没有额外的空间。

字段行在默认line-height的文本大小基础上占据一定高度，但必填字段更高，因为字体更大。如何去除<< 上方和下方的多余空白？

.fieldRow { /* for illustration only */
        border: solid 1px #f00;  
}
.mandatory {
        color: #f00;
	border: solid 1px #f00; /* for illustration only */
	font-size: 24px;
	line-height: 0;
	vertical-align: middle;
}

<div class="fieldRow">
  
	<label for="select">Some field</label>
	
	<select name="select">
		<option>Any</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>	
	
	<span class="mandatory">&laquo;</span>

</div>

【问题讨论】：

你不能，那个空格是字符的一部分。最好的选择是display: inline-block; margin-top: -6px; 然后删除边框
强制跨度与其容器有不同的font-size，如果您确保它们都具有相同的字体大小，那么空白会少很多
还要记住，由于边框的原因，空白区域看起来比实际大 2px
一种更可靠的方法是尝试找到一个可以以正常大小使用的字符（可能是箭头字符），或者使用图像。使用引号作为某种箭头会导致这样的问题。

标签： html css

【解决方案1】：

删除vertical-align: middle 后，我觉得它看起来不错。

.mandatory {
  color: #f00;
  font-size: 24px;
  line-height: 0;
}

DEMO

【讨论】：

【解决方案2】：

移除垂直对齐

.mandatory {
    color: #f00;
    border: solid 1px #f00; /* for illustration only */
    font-size: 24px;
    line-height: 0 !important;
}

DEMO

【讨论】：

【解决方案3】：

我知道这是旧的，但我遇到了类似的问题并想出了一个不同的解决方案。

这有点笨拙，但你可以在文本周围放置一个容器，然后使用溢出隐藏并给它一个高度。较大字体下的多余空间将被包含的 div 截断。你不是摆脱它，而是你隐藏它。这对我有用，但可能不适用于您的情况。

.container {
  overflow: hidden;
  height: 30px; /* Or whatever height is necessary to show the text */
}

<div class="container">
  <span class="mandatory">&laquo;</span>
</div>

【讨论】：

【解决方案4】：

line-height: unset;

或行高：未设置！重要；

【讨论】：

【解决方案5】：

您添加了各种样式，其中添加了空格，即强制跨度的 font-size 与其容器不同。

你添加的边框也让事情看起来比实际更糟。

看到这个fiddle，去掉上面的看起来好多了。

修改后的 CSS：

.fieldRow {
  border: solid 1px #f00;
  font-size: 24px;
}

.mandatory {
  color: #f00;
  border: solid 1px #f00;
  border-top: 0;
  border-bottom: 0;
}

【讨论】：