Consider this block element :
<div style="background-color: gray; line-height: 30px;">
Some text and a <a style="background-color: yellow;">link<\a>
<\div>
Why is it that the yellow color does not extend the full height of the line? How can this be rectified?
Furthermore, when an inline-block is added to this line, it expands to occupy the entire line height. What is the reason behind this behavior?
EDIT
Upon further contemplation, some of my questions have been answered:
Firstly, the width and height of an inline element are not affected by the line-height property, explaining the limited size of the yellow region for the <a> element. Secondly, the expansion of inline-block elements to the line height occurs because they inherit their parent's line-height property. Consequently, text inside an inline-block element will have a line-height equal to its parent. This causes the inline-block's height to expand accordingly to accommodate the text's line-height. This can be demonstrated by creating an empty inline-block with a predetermined width, where no yellow region would appear since an empty inline-block, like any block element, has a height of 0.
So, it seems that converting an inline element (such as <a>, <span>, etc.) to an inline-block element is the correct approach if you want its height to match the line-height. Is there another method to achieve this?
Since these insights come from inference, I am seeking validation from others. Can anyone provide confirmation on this matter?