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

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

Code:

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

Line Height

Code:

text goes here

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
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Reader's comments
comments Bugeyes September 18, 2011 says:
Thank you for the amazingly simple life-changing hair-bristling pig-flying tutorial. I want to hug you.
Reply
comments Chris February 17, 2011 says:
what a SHIT tutorial.. how this is 2nd on google is beyond me.

waist of my mutha fuckkkkin time.. !

Reply
comments Renee June 08, 2010 says:
Execellent! thanks alot, it really made my day.
Reply
Add comments to "Line Height"

Captcha