css line-height问题
代码
body,html{
height:100%;
}
.box {
text-align: center;
line-height: 240px;
border:solid 1px red;
}
<div class="box"><img width="200" height="200" src="../img/1.jpg" /></div>
里面一张图片200*200，因为行高设置为240，我认为div的高度也应该是240，为什么高度变成320px了，多出来的80px是怎么回事呢？？
展开
收起
1
条回答
写回答
写回答
-
IT从业line-hegiht为240px并不是div高度为240的含义
line-height为240px，表示div内形成的行内元素框的行内框的高度为240px，这个行内框包括元素的内容区和上下行间距高度(240-fontSize)/2,同时行内元素在垂直方向上对齐值默认为baseline-基线对齐
img元素作为行内替换元素也形成一个行内框，同时其前面还有有一个匿名的不可见的文本框，2者baseline对齐
div元素的高度由所有行内框的最高点和最低点的距离
那么形成的DIV高度为(240-fontSize)/2+2*1+200
如果font-size:16px
那么最终高度为112+2+200=314px
如果img的高度<(240-fontSize)/2+fontSize,那么最终的高度就为240+2=242px2019-07-17 19:34:56赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
