CSS系列——表单美化、图片选择器、涟漪按钮

font-size 指的是什么？
同一 font-size的不同字体的文字大小不同，指的是改字体刻板的大小，成为em-square。

每款字体都有默认的推荐行高——line-height，由该字体设计师决定，line-height 指定内联元素的真实占据高度。

当两个内联元素字体不一样时，同一font-size 又可能导致父元素包裹的大小不一样，主要原因是两个字体的基线不同。

如果没有设定行高，则默认的行号是字体设计师推荐的行高。

vertical-align: top

上面代码的对齐方式是指行内元素的实际占的面积的顶部对齐，不同字体的顶部预留位置不同。

vertical-align: middle

同上理，该属性和值是行内元素实际占的面积的中线对齐，一般不能用于垂直居中对齐。

原文：Deep dive CSS: font metrics, line-height and vertical-align

img 下面有缝隙是因为基线对齐，修改方法是：

img {
  vertical-align: middle;
}

作用就是抛开原有的基线，也可以设置为:

vertical-align: top;
/* vertical-align: bottom; */
或者
img {
  display: block;
}

inline-block 缝隙解决办法：
使用 flex布局 或者 float 布局。

CSS 小作业
表单美化——百度搜索框
图片上传美化——头像上传
按钮美化——elementUI 涟漪按钮