vertical-align属性. 指的是行内元素与行框基线的对齐方式, 那当一个行框内有多个行内框, 且各个行内框高度不一致时, 是如何计算行框的baseline的?
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
419
收藏
这个还真的不好说，CSS 标准里并没有明确的规定如何计算：
标准里没有明确的规定怎么计算，也提到可能会有多种解。
从个人经验来说，基本上就是在满足规定的对齐的情况下，使得行框最低。
对于单一的元素：
文字的 baseline 就不说了。
对于 img 其 baseline 是图片的低边框。
对于 inline-block，如果其中有行框(子孙元素中的行框一起算)，其 baseline 是最后一个行框的 baseline，如果没有，inline-block 的 baseline 就是这个 box 的margin 下边缘。
一个行框的baseline位置是：
如果其中有 baseline 对齐的元素，那么行框的 baseline 就是这些元素的 baseline。
如果没有，那么就假设其中有一段文字(继承字体字号等)，那就是它的 baseline
大概就是这个样子，个人经验，可能不准确，而且不同浏览器也可能不同。