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
/
/ 与⾏框顶部对齐
css实现三列布局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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。