css中vertical-align属性的初步了解

vertical-align起作用的情况

vertical-align影响inline元素、inline-block元素以及table-cell元素垂直方向上的布局。

//适用于
inline:    ,,,.......
inline-block:   (IE8+),....
table-cell:   

vertical-align:不可继承

vertical-align 取值

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

具体有关基线以及每个属性是详解，
参考链接：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral

inline元素水平排列，在水平或垂直方向上会产生空隙的解决办法

• 垂直空隙（方法：vertical-align:middle）
  

• 水平空隙
  水平产生空隙的原因：代码的换行；
  解决办法：注释去掉换行，或者将代码调成一行显示