line-height 和 vertical-align 都是简单的 CSS 属性, 以致于大多数人自以为知道这两个属性的工作原理, 但实际上这两个属性没那么简单, 下面可能能让你加深理解这 2 个属性
有关于基线:
基线的位置是怎么确定的呢?-- 字母 x 的下边缘线
vertical-align 属性中, 其默认值为 baseline( 基线 ): 使元素的基线与父元素的基线对齐. html 规范没有详细说明部分可替换元素的基线, 这意味着这些元素使用此值的表现因浏览器而异.
注意 vertical-align 只对行内元素, 表格单元格元素生效: 不能用它垂直对齐块级元素
问题 1: 下面代码中, 第二个 span 的 font-size 变成 50px. 此时 p 的高度是多少?(还是 200px 吗?)
- <p style='background:green;font-size: 100px;line-height: 200px;'>
- <span style='background:red'>Ba</span>
- <span style='background:yellow'>Ba</span>
- </p>
p 的盒模型
问题二: 下面代码中, 此时 p 的高度是多少?(是 200px 吗?)
- <p style='background:green;line-height: 200px;'>
- <span style='background:red;font-size: 100px;'>Ba</span>
- </p>
答案 1: 此时的 p 的高度变高了.
p 的盒模型
看下面的图, 已经可以大概明白是为什么了. 字体变小的时候, 实际内容的中间线 (行高是以实际内容的中间线等分的) 与基线更靠近了. 所以导致了下面的结果, 高度被撑高了.
答案 2: 此时的 p 的高度大于 200px.
p 的盒模型
因为浏览器认为每个 "行框盒子" 前面, 存在一个同时具有该元素的字体和行高属性且宽度为 0 的内联盒(CSS 中称为 strut). 知道了这个, 剩下的就和第一个问题的内容一样了.(这里有一个前提, 文档声明必须是 HTML5 文档声明, 如果还是很多年前的老声明, 则不存在 strut)
下面的图, 我在 p 元素里加了 X, 应该可以更容易明白这个问题.
p 的盒模型
想当初, 遇到上面相似的奇怪现象, 纠结半天一直没懂. 现在了解到基线, 然后明白 line-height 和 vertical-align 的相互影响, 之前令人费解的现象总算明白了.
参考链接: https://zhuanlan.zhihu.com/p/25808995
- https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/
- https://www.cnblogs.com/beginner2014/p/9366682.html
- https://developer.mozilla.org/zh-CN/docs/web/CSS/vertical-align
来源: http://www.jianshu.com/p/7d595f941012