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

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

line-height: 1.4em

 
<!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>
<div id="MainText">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
</body>
</html>



line-height: 1.5

 
<?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>
<table>
  <tr>
    <td class="number">The text here uses a  number.</td>
  </tr>
</table>
</body>
</html>



line-height: 75%

 
<?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>
<table>
  <tr>
    <td class="percentage">The text here uses a percentage.</td>
  </tr>
</table>
</body>
</html>



"line-height" Example

    
<html>
<body>
<p id="myP" style="background-color:#EEEEEE">
This is the first line if a sample text.
<br>And this is its second line.
</p>
<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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/line_height&oldid=4755»