HTML/CSS/CSS Attributes and Javascript Style Properties/line height
line-height: 1.4em
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en"> <head> <title></title> <style type="text/css"> body {
margin: 0px; padding: 0px; background-color: #fff;
} p {
font-size: 0.7em; line-height: 1.4em;
}
- MainText {
padding: 10px; margin: 5px; background-color: #ccc; border: 1px solid #fff;
}
</style> </head> <body>
this is a test. this is a test. this is a test. this is a test. .
</body> </html>
</source>
line-height: 1.5
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> td {
width: 200px; font: 12pt arial;
} td.number {
font-size: 12pt; line-height: 1.5;
} </style> </head> <body>
The text here uses a number. |
</body> </html>
</source>
line-height: 75%
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> td {
width: 200px; font: 12pt arial;
} td.percentage {
font-size: 12pt; line-height: 75%;
} </style> </head> <body>
The text here uses a percentage. |
</body> </html>
</source>
"line-height" Example
<source lang="html4strict">
<html> <body>
This is the first line if a sample text.
And this is its second line.
<input type="button"
value="Set lineHeight to 30px" onclick="myP.style.lineHeight="30px"">
<input type="button"
value="Restore line height to normal" onclick="myP.style.lineHeight="normal"">
</body> </html>
</source>