CSS--line-height和vertical-align

line-height

• 对于文本行：
• 在没有line-height时，行内框=内容区=font-size
• 在不设置line-height时，取默认值normal，目前测试的值为font-size的1.3倍，即 行内框=内容区=font-size*1.3
• 在设置line-height后，行内框高度=line-height ， 行间距=line-height （-） font-size ， 内容区=font-size
• 行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端

1、使用百分比和em，行高仅计算一次，子元素继承计算结果。
2、使用数字表示倍数，行高是针对父元素和每个子元素的font-size分别计算
【注，以上计算的基准都是font-size】

题外话，font-weight会影响字体的宽度，但是不会影响高度

vertical-align

• 只适用于内联元素和table-cell元素，且无继承性

取值：

• baseline:当前元素的基线 —— 父元素的基线

• sub\super：当前元素的基线 —— 父元素基线 升高或降低一定位置

• bottom: 行内框的底端 —— 行框的底端

• text-bottom:文本元素底端(或者说行内框的底端) —— 文本底端（即父元素内容区底端）【替换元素或其他非文本元素会忽略这个属性】

• top\text-top:类似

• middle:常用于图片，将行内框的垂直中点与父元素基线上方0.5ex处的一个点对齐

• 设置为百分数时，乘以该元素的line-height，使该元素的baseline相对于父元素的baseline提升或下降一定量

• 也可以直接设置为具体长度，如:5px

• 替换元素没有自己的基线，一般是将其行内框的底端与父元素的基线对齐，而替换元素的内边距、边框、外边距都会使它的行内框增大

• 下面展示一下line-height和vertical-align的关系：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

baseline:

bottom:

Paste_Image.png

middle:

Paste_Image.png

top:

Paste_Image.png