内联元素、vertical-align和line-height

• 内联元素：display:inline-* span label input button a br i strong q img
• 替换元素： img <input type='image'/> iframe video audio embed option canvas object applet
• 幽灵空白节点：html5里内联元素 行框盒子前都有一个宽度为0，可有高度，有基线的空白节点

vertical-align只对内联元素生效，内联元素又包括内联可替换元素（下文简称替换元素），内联非替换元素

vertical-align:baseline默认

• baseline:
  -- 对于文本类内联元素 是字符x的下边缘；
  --对于替换元素 是自身下边缘；
  --对于inline-block，若里面没有内联元素或overflow:!visible，是margin底边缘； 若有的话 则是最后一行内容的基线
  https://stackoverflow.com/questions/43996242/whats-the-deal-with-vertical-align-baseline

  4个：字符x下边缘、自身下边缘、margin下边缘、最后一行内容的基线

vertical-align:middle

• middle ：
  -- 对于内联元素 内里x交叉点的位置
  -- 对于table-cell 相对外面的表格行对齐

line-height

• line-height决定了内联元素的高度， 不影响替换元素
  -line-height: 可以继承

父{ font-size:20px,line-height:1.5  or 200% or 2em }
子：{font-size:30px;}
子继承的行高分别对应是 30*1.5 or 20*200% or 20*2