CODEWITHSUNDEEP
htmlcss
taptaptap
taptaptap

Reputation: 27

Why a nested span inside a div does not follow line-height rule for that div?

I have a div with font size of 88 and line height of 88. The text inside the div has a height taller than 88. Why is this?

<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>

If you open up the element inspector and highlight the parent div, it is 88px tall. However if you highlight the text "I need" and the nested span, the height is 101px. This remains true even if you set the line-height on the span itself:

<div style="font-size:88px;line-height:88px;">
  I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>

See attached repl: https://repl.it/@teeej/ReliablePunctualRam

Upvotes: 0

Views: 855

Answers (1)

tao
tao

Reputation: 90068

<span> is, by default, an inline element.

If you expect it to behave like an inline block element, you have to give it a display value of inline-block and it will have a height of exactly 88px:

div > span { 
  display: inline-block; 
  background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
      I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>

For a better understanding of the implications of display property, I recommend the Candidate Recommendation. And here's the current (official) Recommendation.

Upvotes: 3

Related Questions