CSS属性--vertical-align

vertical-align 会影响行内块级元素在一个行盒中垂直方向的位置， 当一个盒子没有这是盒子的高度时，盒子的高度由内容撑起来，内容可以撑开盒子高度的原因是内容有行高

内容撑开盒子高度的本质

内容有行高，撑起了盒子的高度

行高称其div高度的原因

• 因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
• 行内的文字是有行高的，必须将整个行高包裹进去才算是包裹了这个inline level
• 盒子内每一行的文字都被一个行盒包裹

vertical-align不同情况下的分析

情况一

当行盒内只有文字时，盒子会完全包裹内容

情况二

当盒子中同时包含图片和文字内容时

情况三

行盒中包含图片文字以及inline-block元素，并且inline-block元素比图片大

情况四

行盒中包含图片文字以及inline-block元素，并且inline-block元素比图片大，同时inline-block元素设置了margin-bottom

情况五

行盒中包含图片文字以及inline-block元素，并且inline-block元素比图片大，同时inline-block元素设置了margin-bottom，并且inline-block元素中也包含文字

vertical-align之baseline

从上面的情况中可以看到行盒一定会包含当前行中的所有内容，但是对齐的方式却形式不一，因而能其中默认的对齐方式是baseline

baseline

• 文本的baseline是字母x的下方
• inline-block元素的baseline默认是margin-bottom的底部，就是盒子的底部
• inline-block元素中有文本时，baseline是最后一行文本x字母的下方

vertical-align取值

• baseline: 默认值，基线对齐
• top: 行内级盒子的顶部和行盒顶部对齐
• middle: 行内级盒子的中心点与父盒子基线加上x高度一半的线对齐
• bottom: 把行内级盒子的底部和行盒底部对齐
• 百分比：把行内级盒子提升或者下降一段距离(距离相对于line-height计算/元素高度), 0%表示和baseline的情况一致
• 具体数字：把行内级盒子提升或者下降一段距离，0cm和baseline情况一致

解决图片下方空隙部分的方法

1. 将vertical-align设置为top,middle, bottom

2. 将图片设置为block元素

vertical-align可以解决的问题

1. 文本框和表单内容无法对齐的情况，给文本框设置vertical-align设置除了baseline以为的值，或者设置float: left脱离标准文档流

   

2. input标签和图片无法对齐的情况

3. input输入框顶部不能贴顶的情况