Can you explain how the line-height property functions in CSS? I have noticed that when I set the line-height
to be equal or less than the font size, it causes layout width issues. You can view an example of this problem on a jsFiddle here.
Currently, my font-size is 14px and the line height is also 14px. However, changing the line-height
to 15px or higher resolves the issue. Shouldn't the line-height
only affect the height and not interfere with the width?
Please refer to the image below where you can see that the #wrap
has a width of 300px. Due to the line height, two divs with a width of 150px each do not fit into it properly.
I have tested this in the latest versions of Firefox and Chrome.