CSS文本相关之垂直排列[5]

行内元素的垂直布局跟font-size、line-height及vertical-align有很大关系，理解它们之间的关系才能更好理解行内元素的垂直布局。

1. 内容区(font-size)

对于匿名文本或非替换元素，font-size的值表示内容区的高度；

font-size: 14px;

2. 行内框(line-height)

行高(line-height)减去字体大小(font-size)的值，在平均分配给文字的上下，称之为行间距；行高表示行内框的高度；

// 内容区高度14px,行内框高度14px,行间距4px
font-size: 14px
line-height: 18px;

3. 行框

最高行内框到最低行内框的区域，称之为行框，但要注意：

• 外边距(margin)、边框(border)、内边距(padding)不影响行高；
• 行内框由font-size控制；
• 上外边距(margin-top)和下外边距(margin-bottom)无效
• 边框、内边距和其他外边距有效，内容区位置
• 当文字有多行时，paddd-left、border、margin-left应用于框的开始位置，padding-right、border-right、margin-right应用于框的结束位置；

4. 垂直排列(vertical-align)

垂直排列，跟行内替换元素有很大关系。

行内替换元素，默认位于基线上，而其基线为正常流中最后一个行框的基线，如果该元素为空或overflow不为visible，则基线为margin-bottom的底边。同时，外边距、内边距和边框会影响替换元素内容区的位置；

// 基于基线对齐(默认)
vertical-align:baseline
// 上标
vertical-align:sub
// 下标
vertical-align:super
// 与行框底部对齐
vertical-align:bottom
// 对齐父元素内容区底部
vertical-align:text-bottom
// 与行框顶部对齐
vertical-align:top
// 对齐父元素内容区顶部
vertical-align:text-top
// 父元素+1/2字母X的高度
vertical-align:middle
// 相对于基线上移或下移
vertical-align:(+-n)px
// 百分比相对于元素的line-height值
vertical-align: x%
// 继承父元素的vertical-align属性值
vertical-align:inherit