line-height和vertical-align的用法

line-height

1. 先来了解中行内元素的四条线：顶线，中线，基线，底线

    
        
        
            
    
    

    中文Chinese 

    

image.png

• 顶线：行内元素中汉字文本的内容区域的最顶端
• 底线：行内元素中汉子文本的内容区域的最低端
• 基线：行内元素中英语文本中大写字母的最低端
• 中线：在顶线和底线中间距离的1/2处

---

2. 行高，行距和半行距

• 行高：行高= 上下文下顶线或底线或中线或者基线的距离 = 文本区域（font-size大小）+上下间距（1/2行距）
• 行距：上一行文本底线到下一行文本顶线的垂直距离
• 半行距：1/2行距，也等于(行高-font-size)/2

• 不同字体不同大小（font-size）默认的行高不同，例如默认字体的大小为12px，行高为18px

  
  
  image.png

---

3. 内容区，行内框和行框

• 内容区：顶线到底线之间的区域

  
  
  image.png
• 行内框:每一行中所有的行内元素都会生成一个行内框，行内框是一个抽象的概念，无法显示，在没有设置padding的情况下，行内框等于行内元素的内容区域（顶线和底线之间的距离），行内框只受到行内元素的font-size和font-family影响
• 行框：行框也是抽象的概念，无法实际显示。在一行又多个行内元素时，以其中行内框最大的元素为基准，其他行内元素使用vertical-align垂直对齐时，参照该基准，行框的高度为最大行内框的高度+上半行距+下半行距
  
  image.png
  
  4. line-height的用法
  
  image.png
  
  5. 使用line-height实现垂直居中

    
        
        
            
    
    
        

        中文Chinese 

    

vertical-align的用法

1. 作用

①　控制单元格内容的垂直对齐方式
②　控制多个行内（块）元素在一行上的垂直对齐方式
③　控制行内（块）元素相对其父元素垂直对齐方式
注意： vertical-align 只对行内与行内块元素、表格单元格元素生效：不能用它垂直对齐块级元素

2.可选属性值

image.png

3.下面对每个属性值进行解释，以三个行内元素为例,代码和默认的页面效果如下

    
        
        
            
    
    
        

        span1
        span1
        span1

    

image.png

• top属性值（把指定元素的顶端和行中最高元素的顶端对齐，行内最高元素为行内框最大的元素），将span2 设置为vertical-align:top 效果如下:

  
  
  image.png

• bottom属性值（把指定元素的底端和行中最高元素的顶端对齐），将span1设置vertical-align:bottom效果如下：

  
  
  image.png

• baseline默认属性值（把指定元素的基线对齐与其父元素的基线，父元素基线为其文本基线）

  
  
  image.png

• text-top(吧元素的顶端对齐与父元素字体的顶端)，将span3设置vertical-align:top效果如下：

  
  
  image.png

• text-top(吧元素的底端对齐与父元素字体的底端)，将span3设置vertical-align:bottom效果如下：

  
  
  image.png

• length(使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。),将span3设置vertical-align:20px效果如下：

  
  
  image.png

下面讨论行内所有的元素都为行内块元素的情况

• 当父元素的子元素包含行内元素时，其他行内块元素相对行内元素对齐，默认基线对齐

• 当行内块元素没有子元素时，即空元素，它的基线等于其margin-bottom底端（元素的底部为height+padding-bottom+margin-bottom），当包含子元素时，其基线等于子元素的基线（默认基线对齐）

  
  
  image.png
  
  
  image.png

• 当行中包含行内元素也包含行内块元素时，默认行内块的基线与行内元素(span3)的基线对齐效果如下

    
        
        
            
    
    
        

            
div1
            span3
            

        
    

image.png

应用

通过上面的解释，我们知道了在一行中包含图片时，底部有空隙的原因了

image.png

图片属于没有子元素的行内块元素（基线在其底部），而图片之后有空白文本，默认行内块元素基线对齐与行内元素的基线，由于空白文本效果不明显，我们添加文本，之后的效果如下

image.png

我们只需将图片的vertical-align改成bottom（图片的底部对齐与行内元素的底部），就能解决问题，效果如下

image.png