CSS: remove line height (leading) on ​​long text

Question

How to remove the top from the required range so that << does not have additional space above and below.

The field string takes a certain height based on the default line-height for the text size, however the required field is taller because the font size is larger. How can I highlight the extra space above and below << ?

 .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 this looks good to me.

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

Demo

Answer 2

Remove Vertical Alignment

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

Demo

Answer 3

You added various stylization bits that added a space, namely the font-size required span, other than the container.

The added border also makes things a little worse than them.

See fiddle , it looks much better when you delete above.

Revised CSS:

 .fieldRow { border: solid 1px #f00; font-size: 24px; } .mandatory { color: #f00; border: solid 1px #f00; border-top: 0; border-bottom: 0; }