The line-height property allows you to change the distance between text lines in the block-level elements <div> and <p>.
The line-height declaration form is:
line-height: value
The values for the line-height property are:
normal, length, a number and % (percent).
length defines the distance between text lines in pt (points), px (pixels) or em.
number sets a ratio of the current font size for line-height. Normal is line-height: 1. Greater values increase the line height. Smaller values decrease the line height.
% (my personal favorite) sets a ratio of the current font size for line-height using per cent instead of a number. Normal is line-height: 100%. Greater values increase the line height. Smaller values decrease the line height.
The line-height property can be used in a style statement or a class in a div or a paragragh. One use that comes to mind is to simulate a double-spaced typewritten page.
Sample Stylesheet
/* double space */
.dblspc { line-height: 2 }
<div class="dblspc">text</div>
This div uses<div style="line-height: 160%">.
Donec sagittis porta urna. Morbi felis mi, imperdiet sit amet, elementum quis, condimentum quis, augue. Suspendisse rutrum ante id odio. Maecenas ac nisl non turpis malesuada varius. Aliquam erat volutpat. Ut lacus. Suspendisse sapien tortor, dignissim a, semper tristique, varius ac, tortor.
Aliquam erat volutpat. Nullam malesuada eros. Nunc magna. In adipiscing hendrerit felis. Mauris id sapien. Vivamus massa ipsum, egestas sed, hendrerit vitae, scelerisque sed, dui. Morbi semper dolor ac purus. Etiam in ipsum. Sed consectetuer ultricies mauris.
PC Screenshot (white page)
PC Screenshot (black page)
This div uses<div style="line-height: 70%">.
Donec sagittis porta urna. Morbi felis mi, imperdiet sit amet, elementum quis, condimentum quis, augue. Suspendisse rutrum ante id odio. Maecenas ac nisl non turpis malesuada varius. Aliquam erat volutpat. Ut lacus. Suspendisse sapien tortor, dignissim a, semper tristique, varius ac, tortor.
Aliquam erat volutpat. Nullam malesuada eros. Nunc magna. In adipiscing hendrerit felis. Mauris id sapien. Vivamus massa ipsum, egestas sed, hendrerit vitae, scelerisque sed, dui. Morbi semper dolor ac purus. Etiam in ipsum. Sed consectetuer ultricies mauris.
PC Screenshot (white page)
PC Screenshot (black page)
<br /><br />) to simulate double-spaced text.
Simulate double-spaced text on a web page. Post your page.
Happy coding!
Gnubee
