vertical-align:baseline 神秘的基线

854 阅读1分钟

定义和用法

vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

应用

vertical-align的作用对象是 inline-level element,也就是内联级元素。内联级元素指的是其CSS属性display的属性值为:

  • inline
  • inline-block

什么是基线

基线就是元素内文本的下沿线,这个文本指的是小写字母x,所以字母x的下边缘(线)就是我们的基线

image.png

基线的位置确认

vertical-align的默认值baseline的含义是将元素的基线父元素的基线对齐

确定元素的基线(baseline)

display:inline-block:内联块元素的基线(baseline)位置的确定规则分为三种情况

  1. 元素盒子里没有内容,是一个空的盒子时,baseline的位置为该盒子margin-bottom的边界(如果margin-bottom为0,那就是盒子的下边界)
  2. 元素盒子里有内容,并且其overflow属性值为 visible(默认值)时,那么该盒子的baseline的位置就是内部内容的最后一个内容元素的baseline的位置
  3. 元素盒子里有内容,但是其overflow属性值为非 visible(比如 overflow: hidden ),那么该盒子的baseline位置就是该盒子 margin-bottom 的边界

确定父元素的基线

父元素的基线是由其子元素的基线位置确定的。

父元素基线所在的位置是取子元素的基线中与父元素顶部距离最大的那个子元素的基线位置

元素的对齐

相对父元素的基线对齐

image.png