【我不熟悉的css】10- 一行字号不同的文字底部对齐，vertical-align的使用，字体行高line-height使用的注意事项

需求：一行字号不同的文字底部对齐，如下图

你肯定会想着用这个属性vertical-align

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

也就是说vertical-align的需要使用在一个行内元素上

我们直接用p标签展示大号的字，span标签展示小字

 结果貌似没有对齐！

这个时候你可能会想到给span用vertical-align：bottom，结果变成了这样，又有点偏下了。

这个时候就要考虑到一个叫做行高line-height的东西

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

一个元素设置的行高会直接影响它的高度 ，我们把p标签设置line-height: 100px体验一下

所以我们把我们最初的需求中p标签的line-height设置为1，就是避免出现多余的空白，就可以实现小字和大字的对齐了！

还有一种方法，就是使用flex布局设置底部居中的时候，也需要设置line-height: 1，否则也会有上述问题！

那么问题又来了，你不想用p标签，想用span标签就有问题了。

 这是因为line-height应用于行内元素(span， a等)，和应用于块元素(p标签)等，是不一样的。

line-height对于块级元素（如：p标签），它指定元素行盒最小高度，也就是元素的高度，这里类似line-height=高度。

对于常见的inline 元素（如：span标签），它用于计算行盒（line box）的高度！！注意这里是计算而不是等于！！它有一系列的计算规则，后续说！

请看例子，高度是不一样的。

总之如果为了避免这种情况，你可以把行内元素使用display:inline-block设置为行内块元素，即可使line-height = 高度， 给块元素设置display:inline-block，避免它独占一行。

或者简单粗暴的使用flex布局进行对齐操作。