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是怎么回事呢？？

解决方案

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=242px

这篇关于css line-height问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！