【我不熟悉的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布局进行对齐操作。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值