vertical-align移动距离的问题
<p style="line-height: 1.5em;"> CSS层叠样式表 <span style="vertical-align: -100%;">百分比值</span> <img src="logo.png"/> </p>
老师在视频里提到，如果p标签的行高为1.5em，那么span标签里的vertical-align：-100%就相当于向下移动了1.5em个距离。可是老师之前说上下移动是相对于“基线”上下移动。我把vertical-align设置成24px，网页显示的结果和-100%一样。有些晕，视频里就提了一下，也没有详细解释为什么。还有行高的定义是一行的垂直高度，还是一行的中线相对于临近行的中线的距离？请回答一下，谢谢。
1
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕星星
2019-02-11 15:04:11
你好，
1、如果p标签的行高为1.5em，那么span标签里的vertical-align：-100%就相当于向下移动了1.5em个距离，并且上下移动是相对于“基线”上下移动，这句话是没有问题的。
2、把vertical-align设置成24px，网页显示的结果和-100%一样，这句话是错的，应该是设置vertical-align值为-24px才会和设置-100%结果是一样的，因为1.5em相对于默认字体大小是16px的浏览器来说就是24px，1.5*16=24，所以设置-24px和设置-100%显示的效果是一样的。
3、如果行高设置的都是一样的，那么每行的垂直高度相同，当前行中线距离临行的中线距离与垂直高度是相同的，所以不需要设置去考虑。例如设置行高为40px，那么这一行的整体高度为40px（在没有margin值和padding值的情况下）。
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星