今天学习下css中的line-height 和 vertical-align。line-height指的是设置一行文字的高度

1. line-height 属性

line-height 属性用于设置行间的距离（即行高），它影响元素内文本的行距。line-height 可以是

1，数值（这个非常常用1.5倍或者1.667黄金比例）

2，百分比（根据设置的font-size作为参照）

3，长度单位（如px、em等）

4，normal（由浏览器根据文字大小决定的一个默认值。）。

HTML 示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Line Height Example</title>  
<style>  
  .line-height-normal { 
    font-size:30px;  
    line-height: normal;  
    background-color:aquamarine
  }  
  .line-height-number { 
    font-size:30px; 
    line-height: 1.5; /* 无单位，表示行高是字体大小的1.5倍 */  
    background-color:aquamarine
  }  
  .line-height-px { 
    font-size:30px;  
    line-height: 30px; /* 长度单位 */ 
    background-color:aquamarine
  }  
  .line-height-percent { 
    font-size:30px;  
    line-height: 150%; /* 百分比，基于字体大小 */  
    background-color:aquamarine
  }  
</style>  
</head>  
<body>  
  
<p class="line-height-normal">这是正常的行高。</p>  
<p class="line-height-number">这是设置了行高为字体大小1.5倍的文本。</p>  
<p class="line-height-px">这是设置了固定行高为30px的文本。</p>  
<p class="line-height-percent">这是设置了行高为字体大小150%的文本。</p>  
  
</body>  
</html>

注意事项：

1，line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。

2，line-height 和 height 是什么关系？

设置了 height ，那么高度就是 height 的值。

不设置 height 的时候，会根据 line-height 计算高度。

运行效果：一般就用设置数值的方式，这样不管font-size设置多少，都可以按倍数来计算。

2. vertical-align 属性

vertical-align 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

它仅对行内元素（如<span>、<img>等）和表格单元格（<td>、<th>）有效。

vertical-align 可以是baseline（默认值）、top、middle、bottom、text-top、text-bottom、sub、super、length（如5px）或%（相对于行高）。

HTML 示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Vertical Align Example</title>  

<style>  

    .container {  
    font-size: 24px;  
    height: 100px;  
    line-height: 100px;  
    border: 1px solid #000;  
    padding: 10px;  
    font-size: 36px;
    background-color:aquamarine;
} 

    
  .vertical-align-baseline {  
      font-size: 18px; 
      vertical-align: baseline;    
    }  
  .vertical-align-top {  
      vertical-align: top;
      font-size: 18px; 
       
    }  
  .vertical-align-middle {  
      vertical-align: middle;  
      font-size: 18px; 
    }  
  .vertical-align-bottom {  
      vertical-align: bottom;  
      font-size: 18px;

    }   
  </style>  
  
</head>  
<body>  
  <div class="container">  
    这是一些文本x<span class="vertical-align-baseline">x基线对齐</span>     
  </div> 
  <div class="container">  
  这是一些文本x<span class="vertical-align-top">x顶部对齐</span> 
  </div> 
  <div class="container">
    这是一些文本x<span class="vertical-align-middle">x中间对齐</span>
  </div>
  <div class="container">  
    这是一些文本x<span class="vertical-align-bottom">x底部对齐</span>
  </div>
  
</body>  

</html>

运行效果如下：

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

css3新手入门(5)css中关于line-height vertical-align属性详解

1. line-height 属性

2. vertical-align 属性