【我不熟悉的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布局进行对齐操作。
白日梦想家397: 抄gpt。。。。
我有一棵树: 截图上都有
九段刀客: 写了个寂寞,css代码都没有,写点有用的东西好不好,最重要的就是实现处理效果的代码,居然没有写了一堆废话
我有一棵树: 换个版本