CSS: Remove Line Height (leading) on larger text

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">&laquo;</span>

</div>

Answer 1

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

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

DEMO