CSS: Remove Line Height (leading) on larger text

css, html

Solution

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

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

DEMO

Problem

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

Original source