8

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

字段行根据文本大小的默认值占据一定的高度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>

4

5 回答 5

10

删除后vertical-align: middle对我来说看起来不错。

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

演示

于 2012-12-04T10:52:34.763 回答
3

删除垂直对齐

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

演示

于 2012-12-04T10:53:36.270 回答
2

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

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

.container {
  overflow: hidden;
  height: 30px; /* Or whatever height is necessary to show the text */
}
<div class="container">
  <span class="mandatory">&laquo;</span>
</div>

于 2018-07-16T00:16:28.333 回答
1

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

您添加的边框也使事情看起来比实际情况更糟。

看到这个小提琴，当你删除上面的时候它看起来好多了。

修改后的 CSS：

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

.mandatory {
  color: #f00;
  border: solid 1px #f00;
  border-top: 0;
  border-bottom: 0;
}
于 2012-12-04T10:54:53.883 回答
1 
line-height: unset;

或行高：未设置！重要；

于 2021-04-13T20:30:18.923 回答