Reputation: 3749
How does the line-height property in CSS works? If i set the line-height
equal or less than the font size, it creates the problem with layout width. Please check this jsFiddle to see the problem.
I'm using font-size 14px, and line height 14px. If you change the line-height
to 15px or more, the problem will be solved. Shouldn't the line-height
only change the height, not disturb the width?
Please see the image below, as you see the #wrap
has width of 300px, now because of line height the two div's of width 150px are not fitting into it.
I have checked with firefox and chrome, latest versions.
Upvotes: 1
Views: 1567
Reputation: 272446
It has nothing to do with line height... not directly atleast. The two boxes will remain 150px wide regardless of whether you specify a line height or not. The overflow: auto
causes a vertical scroll bar to appear (for reasons unknown to me) which reduces the available width of your container from 300px to ~280px hence the two colored boxes cannot appear side by side anymore. If you remove overflow: auto
the result will appear as expected.
Revised demo here. To counter the vertical scrollbar, I added 1px padding on the container which seemed to counter the problem. For larger font sizes, use a padding of 2px.
Upvotes: 1
Reputation: 116200
In Chrome, if I increase the line height to 18px, the divs will be side by side, but the width doesn't change. Apparently this has something to do with the calculation of the height of #wrap. The browser cannot decide wether to show the scrollbar in #wrap or not. But since #wrap is exactly 300 wide, and thus can hold the two divs side by side only when the scrollbar isn't displayed, you'll have to force to hide it. Change #wrap overflow to hidden
, or remove this property altogether.
Upvotes: 1
Reputation: 10619
Line height is an inherited property but its inheritance works in a complicated way as compared to other inherited properties.
There is an excellent slideshow to Illustrate how line-height works depending on the units you specify the line height.
http://www.slideshare.net/maxdesign/line-height.
Slide 28 onwards explains your issue.
Upvotes: 2