CSS：删除较大文本上的行高（前导） [英] CSS: Remove Line Height (leading) on larger text

问题描述

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

字段行占据一定的高度，基于文本大小的默认值 line-height ，但是必填字段更高，因为字体大小更大。如何删除< ？

  .fieldRow {/ *仅供说明* / border：solid 1px＃f00; } .mandatory {color：＃f00; border：solid 1px＃f00; / *仅供说明* / font-size：24px; line-height：0; vertical-align：middle;}  

 < div class = fieldRow> < label for =select>部分字段< / label> < select name =select> < option>任何< / option> < option value =1> 1< / option> < option value =2> 2< / option> < option value =3> 3< / option> < / select> < span class =mandatory>& laquo;< / span>< / div>  

解决方案

删除 vertical-align：middle 后， >

  .mandatory {
 color：＃f00; 
 font-size：24px; 
 line-height：0; 
} 
  

DEMO

How can I remove the leading from the mandatory span so that the << has no additional space above and below.

The field row occupies a certain height based on the default line-height for the text size, the mandatory field however is taller because the font size is larger. How can I strip out the extra white space above and below the <<?

.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>

解决方案

After removing vertical-align: middle it looks good to me.

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

DEMO

这篇关于CSS：删除较大文本上的行高（前导）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！