认识baseline
13 August 2015

baseline是一个容易让人忽略的东西,但是对它的忽略会造成一些奇怪的现象,就如同对z-index不熟悉一样。

最开始发现baseline存在是一个2列并排的元素里,对右边的元素用了font-size:16px;line-height:30px;height:30px;,然而元素内的文字在安卓机居中了,在苹果机却没有,而是和他左边的元素底部保持平齐。

baseline带来的问题,总是在使用line-height属性时被发现。

baseline 是vertical-align的默认值

  • vertical-align 指定了行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式。

vertical-align指定的是垂直方向上的对其方式,他有参照,一般是父级元素,也会受兄弟元素影响。

取值有以下几种:

行内元素

  • baseline

    元素基线与父元素的基线对齐。一些 可替换元素,比如 <textarea> , HTML标准没有说明它的基线,这意味着使用这个关键字,各浏览器表现可能不一样。

  • sub

    元素基线与父元素的下标基线对齐。

  • super

    元素基线与父元素的上标基线对齐。

  • text-top

    元素顶端与父元素字体的顶端对齐。

  • text-bottom

    元素底端与父元素字体的底端对齐。

  • middle

    元素中线与父元素的基线对齐。

  • 元素基线超过父元素的基线指定高度。可以取负值。
  • , 百分比相对于 line-height 。 下面两个属性不像上面的属性相对于父元素,而是相对于整行:
  • top
元素及其后代的顶端与整行的顶端对齐。
  • bottom

    元素及其后代的底端与整行的底端对齐。 如果元素没有基线baseline,则以它的外边距的下边缘为基线。

table-cell元素

  • baseline (and sub, super, text-top, text-bottom, , and )

    与同行单元格的基线对齐。

  • top

    单元格的内边距的上边缘与行的顶端对齐。

  • middle

    单元格垂直居中。

  • bottom

    单元格的内边距的下边缘与行的底端对齐。 可以取负值。

不同浏览器对baseline解读不一样

我们常会纠结baseline表现的是span、input、img、button

image

处理方案

既然这么多浏览器对baseline理解不一致,规范没统一的东西还是不用为好,也没必要记住每个浏览器对每个支持baseline的元素的渲染方式。反正用到baseline的多是为了对齐,不如重置vertical-align:baseline,使用vertical-align:bottom,有不对齐的,用padding补救。

漠大的知乎回答

结合 CSS 2.1 规范中行内格式化上下文、行高计算、差异半差异、’line-height’ 和 ‘vertical-align’ 特性中相关说明,可以总结出行框顶边与行框底边位置的计算方式:

  • 每一个行内元素会产生一个行内框;

  • 行内框会在行框内横向排列;

  • ‘line-height’ 特性值指定了每个行内非替换元素生成的行内框的 确切 高度;行内替换元素的高度由 ‘height’ 特性值决定;

  • 文字在行内框中垂直排列,上下空隙用半差异填补;如果字号大于行内框则文字从上下方向上溢出行内框,并可能渗入到其他行框内(行框是永远不会重叠的);

  • ‘vertical-align’ 特性值指定了每个行内框的垂直对齐方式;

  • 行框的顶边界是这一系列垂直对齐的行内框最高的顶边框,底边界是最低的底边框。

  • 行框的高度是顶边界到底边界的距离。

image

黄金外链

http://w3help.org/zh-cn/causes/RD1016

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/