Chris Spittles Chris Spittles - 7 months ago 26
HTML Question

CSS: Remove Line Height (leading) on larger text

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

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

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

DEMO

Comments