详细了解line-height和vertical-align

vertical-align

先看一个例子

<div id="text" style="border: 1px solid #ccc;height:15rem;">
    <span style="vertical-align:bottom;border: 1px solid #ccc;display:inline-block;height:2rem">假设我是一个有内容的inline-block</span>
    <span style="border: 1px solid #ccc;font-size:5rem;vertical-align:baseline;">我的fontSize=5rem</span>
    <span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;height:2rem;width:1rem;"></span>
    我是一个不存在的x
</div>

测试图片
上面有一个block盒子,一个line盒子和3个inline(inline-block)盒子,一个文字(匿名)盒子,通常情况下就算盒子内没有文字也会存在一个宽度为0的匿名文字盒子(如果完全是个空盒子则没有)
block盒子就是div,line盒子是由其内部的盒子组合起来的,注意line盒子是由其内部的盒子撑开的,无论div设置多大的高度都和line盒子的大小无关
vertical-align的值,常用的分别有baseline(默认),top,bottom,middle,text-top,text-bottom,sub,super,数值(px,em...),百分比.下面只谈inline(inline-block)盒子的属性值的效果

• baseline(默认值)
  基线,盒子的基线大约在其内部文字(匿名)盒子英文字母X的下边缘(不同的字体不同),img标签和空盒子的基线盒子的下边缘,在比如上图中的line盒子的基线就是上图中我是一个不存在的x中x的下方,第一个span的基线就在英文字母i的下边缘,第二个span的基线就在盒子的下边缘,设置为baseline就是让盒子本身的基线和line盒子的基线对齐
• top
  顶线,盒子自身的顶部,设置为top是让盒子自身的顶线和line盒子的顶线对齐
• bottom
  底线,盒子自身的底部,设置为top是让盒子自身的底线和line盒子的低线对齐
• middle
  中线,盒子自身的中间,注意设置此值不是和line盒子的中线对齐,注意设置此值不是和line盒子的中线对齐,注意设置此值不是和line盒子的中线对齐
  w3cshoole直接说,middle是把此元素放置在父元素的中部,这应该是不对的
  应该是和line盒子中文字(匿名)小写x字母的中线对齐,line盒子中文字(匿名)小写x字母的中线对齐,line盒子中文字(匿名)小写x字母的中线对齐,比如这样
  测试图片
  如果比文字(匿名)盒子高的盒子设置为middle,会让文字(匿名)盒子上浮,盒子的基线也会改变,可以理解为比文字(匿名)盒子高的盒子与line盒子中文字(匿名)小写x字母的中线对齐后,比文字(匿名)盒子高的盒子下沉,line盒子的高度也跟着下沉,比如这样
  测试图片
  middle的值只和文字(匿名)有关,我觉得和属性的名字不相符,也搞得很复杂,难道是我理解的问题?后面会说用middle和line-height居中对齐
• text-top
  元素本身的基线与line盒子中文字(匿名)的顶端对齐,注意不是文字所在的匿名文字盒子的顶端
• text-bottom
  元素本身的基线与line盒子中文字(匿名)的底端对齐,注意不是文字所在的匿名文字盒子的底端
• sub
  元素本身的基线与line盒子中文字(匿名)的下标对齐
• super
  元素本身的基线与line盒子中文字(匿名)的上标对齐
• 数值(支持负值)
  元素本身基于line盒子基线的偏移
• 百分比
  和数值一样,不过基于父元素的line-height计算,也就是line盒子中文字盒子(匿名)的line-height

line-height

line-height顾名思义,我觉得就是设置line盒子的最低高度,比如下图中,设置div的line-height为3rem就是设置div盒子中line盒子的最低高度为3rem,设置span的line-height为5rem就是设置span盒子中line盒子的最低高度为5rem

测试图片

<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:3rem;">
    <span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;font-size:1rem;line-height:5rem;">我的line-height为5rem</span>
    我是第一行我的line-height为5rem
    <br/>
    我是第二行我的line-height为3rem
</div>

div中有两个line盒子,第一个是由内部撑开的5rem,第二个是设置div的3rem
红框我把它称作行内间距,注意是行内间距,不是行间距,不是line盒子和line盒子之间的间距,我的理解是line盒子和line盒子之间是没有间距的,但是line盒子本事,有行内上间距和行内下间距,他们是相等的,都等于(line盒子的高度-font-size)/2,上面一共有六个行内间距,div盒子内两行的4个和span盒子中一行的2个
line-height常用的值有normal(初始值),数字(不是数值),数值(px,em...),百分比,inherit(默认值)

• inherit(默认值)
  继承父元素的值
• normal(初始值)
  这个值在不同的font-size和浏览器下有所不同,一般为1.2左右
• 数字(推荐使用)
  1,1.1,1.2,1.3...这个值是自身font-size的倍数,比如设置为1,那么行内间距就会(line-height-font-size)/2=0,所以看起来文字之间就会没有间距
• 数值
  设置固定的数值,如果设置为em,就会根据当前盒子font-size的大小计算出一个固定的值,后代会继承此值
• 百分比
  还是设置固定的数值,根据当前font-size的大小计算,后代会继承此值

记录几种用line-height和vertical居中的方法

• 单行文字在blcok中居中
  设置外部block的line-height和height相等,可以不设置height的值,设置了line-height,height会自动计算等于line-height
• 多行文字在block中居中
  同样设置外部block的line-height和height相等,将内部包含文字的block元素display:inline-block;line-height:normal;vertical-align:middle;如下图所示
  测试图片

<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:8rem;">
    <p style="line-height:normal;vertical-align:middle;display:inline-block">我是多行文字<br/>我真的是多行<br/>其实只有三行了</p>
</div>

其实上面的并不是真正的垂直居中,只是近似垂直居中,因为字母x的中间并不一定是line盒子的中间,会稍微偏下一点点,要真正的垂直居中,要将外部block盒子的font-size设为0,内部block盒子的font-size设置为正常值就是真正的垂直居中了

• 单个图片
  和上面的一样,图片本身就是inline-block