HTML/CSS/CSS Attributes and Javascript Style Properties/line height

Материал из Web эксперт
Перейти к: навигация, поиск

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;

}

  1. 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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/line_height&oldid=4755»