Html CSS：删除较大文本上的行高（前导）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13701110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Remove Line Height (leading) on larger text
提问by Chris Spittles
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-heightfor 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 <<?
字段行根据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">«</span>
</div>回答by Gurpreet Singh
回答by Sowmya
回答by Sean
You've added various bits of styling which have added the whitespace in, namely the font-sizeof the mandatory span is different to it's container.
您已经添加了各种样式，其中添加了空格，即font-size强制跨度的 不同于它的容器。
The border you've added also makes things look a bit worse than they are.
您添加的边框也使事情看起来比实际情况更糟。
See this fiddle, it looks a lot better when you remove the above.
看到这个小提琴，当你删除上面的时候它看起来好多了。
Revised CSS:
修改后的 CSS：
.fieldRow {
border: solid 1px #f00;
font-size: 24px;
}
.mandatory {
color: #f00;
border: solid 1px #f00;
border-top: 0;
border-bottom: 0;
}
回答by Stephen Starzyk
I know this is old, but I had a similar problem and came up with a different solution.
我知道这很旧，但我遇到了类似的问题并提出了不同的解决方案。
It's a bit hacky, but you can put a container around the text, then use overflow hidden and give it a height. The extra space under the larger font will be cut off by the containing div. You're not getting rid of it, but your hiding it. This works for me, may not work in your situation though.
这有点hacky，但是您可以在文本周围放置一个容器，然后使用overflow hidden 并给它一个高度。较大字体下的额外空间将被包含的 div 截断。你不是摆脱它，而是你隐藏它。这对我有用，但可能不适用于您的情况。
.container {
overflow: hidden;
height: 30px; /* Or whatever height is necessary to show the text */
}<div class="container">
<span class="mandatory">«</span>
</div>