CODEWITHSUNDEEP
css
Roman
Roman

Reputation: 3749

CSS: why line-height disturbs the width?

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.

enter image description here

Upvotes: 1

Views: 1567

Answers (3)

Salman Arshad
Salman Arshad

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.

Edit

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

GolezTrol
GolezTrol

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

defau1t
defau1t

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

Related Questions