One of the most common problems in making tight layouts is getting a text summary to fit a box perfectly. What may look right in one browser, will invariably not look as good in another. This is made worse whenyour text needs to fit in with some other vertical size (e.g. an image next to it).
The key to getting this right is the use of the “em” dimension when sizing elements, and the use of the “line-height” css property. An “em” is a unit, equivalent to the character height of the font. So if your font-size is set to 12px, 1.5em would be 18px (12 * 1.5).
Setting the “line-height” property to 1.2em, for example, would tell browsers to render lines of text at a height of of 1.2 times the height of the font. This goes a long way to standardising the appearance of text across browsers, but we want to push it a bit further to make it perfect. By using ems on the “height” property of a <div> tag and setting the “overflow” property to “hidden” we can control the number of lines of text that are displayed. For the height property of the <div> tag, use the numbers of lines multiplied by the number of ems used for the line-height (e.g. 5 lines would be 5 * 1.2 em, which is 6em).