Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Line Height
Your Ad Here

Line Height


With CSS, the height of a text line can be changed using the line-height property.

Start off by placing the following code in the head section of you page.(between <head> and </head>)

Code:

<style type="text/css">
p{ line-height: 16pt }
</style>

To use the style, place the following wherever you would like to use it.

Line Height

Code:

<p> text goes here </p>

In action:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rhoncus. Fusce in sapien in pede blandit euismod. Integer tincidunt tortor quis turpis. Vestibulum scelerisque felis non justo. Sed leo magna, lacinia in, mollis vel, egestas non, dui. Nullam tempus sem quis mi. Cras ac tellus et ligula porta commodo.

Notice that the height between lines are larger above. The line height can also be smaller than the size of the font, however, this makes the text hard to read because the text will overlap each other.

Possible Values
Other values besides pt can be used.

number- Sets a number that will be multiplied with the current font-size to set the distance between the lines. (ex. 12.1)
%- Sets a distance between the lines in % of the current font size (ex. 120%)



Author's URL: Depiction.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Line Height"

Only registered users can write comment

No comments yet...