Hello. As i am learning to use the line height of parent to vertically center the text of child text, I have faced a problem that I didn’t understand. For the Display: inline-block example, I have set the line-height of the div to the value of the height of div 200px and set the span line-height to 1.5. Everything works fine.
But when I change the Display: inline-block to Display: inline, I have noticed that the distance between the two lines in span is not 1.5 anymore, it seems become 200px which is the same as the div line height. But I only changed the display settings.
Can anyone tell me the reason behind it? Why using Display:inline can’t generate the same result as Display:inline-block? As most people told me the difference between Display:inline and Display:inline-block is that Display:inline-block can set the width and height