Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
Free Stock Images
  • Create A Free Account
  • Download High-Res Stock Images For Free
  • +5 Million Images
Your Ad Here
Inserting images with CSS
by Stefan Mischook
A Tutorial on Text
by Adam Priestley
CSS Basic, CSS Codes
by Adam Priestley
First Letter
by Depiction.net
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML tutorials
A collection of HTML templates.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Line Height
rss

Line Height

Author: Depiction.net More by this author

Added: Oct 21, 2004 Rating:  Average Rating: 2.72 Votes: 96 Position: 11355 of 14445Average Rating: 2.72 Votes: 96 Position: 11355 of 14445Average Rating: 2.72 Votes: 96 Position: 11355 of 14445Average Rating: 2.72 Votes: 96 Position: 11355 of 14445Average Rating: 2.72 Votes: 96 Position: 11355 of 14445 Level: Beginner Software:  DreamweaverGoLiveFrontPage

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%)



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Line Height"