You are currently browsing the page Line Height in the CSS category.

Line Height

Line height is used to reduce or to increase the space between 2 text lines in a paragraph.

<style type="text/css">
p {
font-size:11px;
line-height:VALUEpx;
}
</style>

Here is line height 5px. Impossible to read. Ut at urna a sem semper vestibulum. Vestibulum pellentesque. Duis interdum. Praesent pellentesque tincidunt magna. Curabitur faucibus. Aenean imperdiet scelerisque libero. Nullam nulla sem, rhoncus ac, rhoncus nec, tempor sit amet, dui. Cras felis nunc, tincidunt et, euismod sed, pretium non, dolor. Donec leo risus, euismod eget, fringilla quis, consectetuer nec, libero. Praesent imperdiet.

Here is line height 25px. Ah, space! Cras leo lectus, semper lobortis, luctus eget, placerat at, tellus. Aenean eget erat sed massa aliquam tincidunt. Praesent vestibulum. Aliquam ligula. Aliquam convallis pede sit amet odio. Vivamus non justo vitae urna volutpat pharetra. Vivamus ac sapien. Aliquam in nibh quis pede porta malesuada. Nullam convallis. Vestibulum purus. Mauris felis justo, ullamcorper vitae, lacinia et, tristique nec, wisi. Morbi nonummy.

When using shorthand property, you can set the line-height like this:

<style type="text/css">
p {
font: 11px/20px Arial, sans-serif;
}
</style>

Here I've set the line-height to 20px and the font-size to 11px :)

Print This Post Print This Post



Sponsors


Leave a Comment

Works? Doesn't work? Other tips? Please leave a comment! :)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

To post codes, please go to SimpleCode and transform your codes first, so that it will displayed properly. Indeed, < and > need to be converted to &lt; and &gt; :)


Close
E-mail It