vertical-align解析

一、概念：

1、该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

2、值：

• baseline 默认。元素放置在父元素的基线上。
• sub 垂直对齐文本的下标。
• super 垂直对齐文本的上标
• top 把元素的顶端与行中最高元素的顶端对齐
• text-top 把元素的顶端与父元素字体的顶端对齐
• middle 把此元素放置在父元素的中部。
• bottom 把元素的顶端与行中最低的元素的顶端对齐。
• text-bottom 把元素的底端与父元素字体的底端对齐。
• length
• % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
• inherit 规定应该从父元素继承 vertical-align 属性的值

3、总结

• 行内框内文本对齐(如果多行，则最后一行与其它的文本对齐):且，这线即为行内框的基线 √
• 行内框内的行内元素，如果后代有文本(不一定要子代)，则其内的文本与行内框的基线对齐 √
• 否则，是该行内元素的底部与行内框的基线对齐 √
  
  vertical.jpg

4、解释一些现象

1. 图片底下有多于空白
   解释：图片底部与容器基线对齐，容器基线即文本基线，因为有line-height，所以x下面会有空白，进而图片底下有空白
   解决方式一：容器line-height:0或者font-size:0(消除line-height的影响)
   解决方式二：设置图片vertical-align:bottom(设置vertical-align为其他值)
解决方式三：设置图片display:block;(vertical-align只对行内元素起作用)