Question

如何从强制范围中删除前导，以使<<上方和下方没有额外空格。

字段行基于文本大小的默认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>

Answer 1

删除vertical-align: middle后，我觉得很好。

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

DEMO

Answer 2

删除vertical-align

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

<强> DEMO

Answer 3

你添加了各种样式，添加了空格，即强制范围的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;
}

Answer 4

我知道这很老，但是我遇到了类似的问题，并提出了不同的解决方案。

这有点古怪，但是您可以在文本周围放置一个容器，然后使用隐藏的溢出并赋予其高度。较大字体下的多余空间将被包含的div所截断。您不是要摆脱它，而是要隐藏它。这对我有用，但是在您的情况下可能不起作用。

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

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

Answer 5

line-height: unset;

或行高：未设置！重要；

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

5 个答案: