vertical-align

mdn上的的解释

注意

• 行内元素是没有高度的
• 是由内容将其撑起来
• 当一行放不下的时候换行
• 这里有一个概念叫做行盒

• 在一个大盒子里一共有三个行盒

现在删除其他的，只看第一个行盒内

• 明显看到图片下边空出一段距离
• 出现这种情况的原因就是因为vertical-align在影响
  • 默认值是base-line，基线对齐
• 改变vertical-align为top

• 此时图片距离底部的距离消失，同时文本也正常的在顶部
• 设置值middle

误解 — vertical-align可以设置 垂直方向的居中

• 此时并没有真正的居中
• 这和middle对齐的位置有关，他是和字母x的往上一半对齐
• 当我们设置一个字体很大的时候非常明显

• 可以看到并没有居中对齐