Home/ Questions/Q 6616321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:34:08+00:00

How does the line-height property in CSS works? If i set the line-height equal

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0