为什么inline-block带有文本和不带文本vertical-align表现不一样
来源：-
Follow My Heart_03
2016-05-29 16:48
带有文本的inline-block, 好像是和最后一行的文本基线对齐
<div style="height:300px;line-height:300px;background:red;"> some text... <span style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> text in inline-block... </span> </div>
不带文本的inline-block，好像是inline-block的底部边缘和文本的基线对齐
<div style="height:300px;line-height:300px;background:red;"> some text... <span style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> <!-- no text in inline-block... --> </span> </div>
为什么会有这种差别呢
写回答
关注
1回答
-
- _西口褡裢_
- 2016-09-19 00:05:29
css2的官方规定，inline-block元素如果里面是空的，或有overflow属性，基线就是底边缘，否则基线就是由里面的文字或图片决定的。
CSS深入理解之vertical-align
深入理解vertical-align的属性值，分享开发中应用经验
39337 学习 · 57 问题
相似问题