vertical-align移动距离的问题
来源：3-10 vertical-align
爱学习昵称已被使用
2019-02-08 23:53:25
<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回答
-
好帮手慕星星
2019-02-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值的情况下）。
祝学习愉快！
0
相似问题