CODEWITHSUNDEEP
htmlcss
Chris Spittles
Chris Spittles

Reputation: 15359

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>

Upvotes: 10

Views: 52037

Answers (5)

Sean
Sean

Reputation: 6499

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;
}

Upvotes: 1

Dangelo Santana
Dangelo Santana

Reputation: 31

line-height: unset;

or line-height: unset !important;

Upvotes: 1

Stephen Starzyk
Stephen Starzyk

Reputation: 45

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

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Remove vertical-align

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

DEMO

Upvotes: 3

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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

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

DEMO

Upvotes: 12

Related Questions