CSS: Remove Line Height (leading) on larger text - html

Question

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">«</span>
</div>

Answer 1

After removing vertical-align: middle it looks good to me.
.mandatory {
color: #f00;
font-size: 24px;
line-height: 0;
}
DEMO

Answer 2

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

Answer 3

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.
.container {
overflow: hidden;
height: 30px; /* Or whatever height is necessary to show the text */
}
<div class="container">
<span class="mandatory">«</span>
</div>

Answer 4

line-height: unset;
or
line-height: unset !important;

Answer 5

You've added various bits of styling which have added the whitespace in, namely the font-size of the mandatory span is different to it's container.
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:
.fieldRow {
border: solid 1px #f00;
font-size: 24px;
}
.mandatory {
color: #f00;
border: solid 1px #f00;
border-top: 0;
border-bottom: 0;
}