Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


July 26, 1998

Putting Style Sheets in Perspective

line-height

Initial Value:
normal
Allowed Values:
normal
number
length
percentage
inherit
Applies to:
all elements
Inherited?:
yes
Percentages:
refer to the font size
of the element itself


Line-height is something we haven't previously discussed, so now is as good a time as any to bring it up. The line-height property specifies the distance between the baselines of adjacent lines. The added space, called the leading, is inserted half above and half below the text.


The example shows the line-height set with a number value of 1.2em and 3.2em to display the difference between the two values.

.normal { line-height: 1.2em; font-size: 10pt; }
.wide { line-height: 3.2em; font-size: 10pt; } 
This is a small paragraph showing a normal line-height of 1.2 with a font-size of 10pt. This is a small paragraph showing a normal line-height of 1.2 with a font-size of 10pt.
This is a small paragraph showing a ridiculous line-height of 3.2 with a font-size of 10pt. This is a small paragraph showing a ridiculous line-height of 3.2 with a font-size of 10pt. This is a small paragraph showing a ridiculous line-height of 3.2 with a font-size of 10pt.

Additional Resources:

Putting Style Sheets in Perspective: font
Putting Style Sheets in Perspective: Index
Putting Style Sheets in Perspective: text-decoration


Up to => Home / Authoring / Style / Sheets / Fonts




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers