行内元素的垂直布局跟font-size
、line-height
及vertical-align
有很大关系,理解它们之间的关系才能更好理解行内元素的垂直布局。
- 内容区(font-size)
对于匿名文本或非替换元素,font-size
的值表示内容区的高度;
font-size: 14px;
- 行内框(line-height)
行高(line-height
)减去字体大小(font-size
)的值,在平均分配给文字的上下,称之为行间距;行高表示行内框的高度;
// 内容区高度14px,行内框高度14px,行间距4px
font-size: 14px
line-height: 18px;
- 行框
最高行内框到最低行内框的区域,称之为行框,但要注意:
- 外边距(margin)、边框(border)、内边距(padding)不影响行高;
- 行内框由font-size控制;
- 上外边距(margin-top)和下外边距(margin-bottom)无效
- 边框、内边距和其他外边距有效,内容区位置
- 当文字有多行时,paddd-left、border、margin-left应用于框的开始位置,padding-right、border-right、margin-right应用于框的结束位置;
- 垂直排列(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