5
553hello
world
span{
font-size: 100px;
border: 1px solid red;
line-height:10px;
}
p{
border:1px solid;
}代码如上，当span的font-size大于其line-height值，会出现下方的p会和span重叠了一部分，请问这个重叠部分的高度是怎么计算的？
代码：这里
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
p元素作为一个块级别元素会接在其它元素后面时，会发生折行，形成自己的的块级框，这个块级框的上顶部和前一个元素的块级别框（行框）的底部对齐
问题中的span是一个行内元素，内部hello文本形成一个行框，这个行框的的line-height为10px，font-size:100px;加到文本内容区行间距为(10-100)/2=-45px;形成的效果为span hello文本将向上移动45px（相对于line-height：100px；font-size：100px），有一部份文本看不到；行框底部也相应的上移动了45px
p world将被放置相应的位置~~~~（100+(-45)）==55px;
我认为那个位置是基线与行框之间的差距，只要行高小于字体大小。那个位置的大小应该是取决于字体及字体大小。
p的折行是以span的行框（line box）的下边沿开始算起的。而行框的下边沿，在行高小于字体大小时，是在基线的上方。
你可以给span加上
vertical-align: top;，会发现p 跳上去了。时间不够，就不补图了