数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

深入理解 line-height 和 vertical-align

来源:脚本之家  责任编辑:小易  

几个概念

  • line box:包裹 inline box 的一个盒子,一个或多个 line box 堆叠撑起一个 HTML 元素。
  • inline(-level) box:可以是一个由行内元素包裹的盒子,也可以是一个纯文字的匿名盒子。
  • content area:对于非替换元素来说,content area 的范围由 font-size 以及字体本身决定;对于替换元素来说,由元素自有宽高决定。
  • baseline:一个元素基线的位置由该元素内字母 x 底部所在的位置决定,当然字体不同基线所在的位置也就不同。

通过一段代码可以理解一下:

div {
  background-color: #ccc;
  font-size: 20px;
  color: #fff;
}
span {
  color: red;
}
<div>文字1<span>文字2</span>文字3</div>

白色的文字就是一个匿名 inline box,红色的文字是一个由 span 包裹的 inline box。这三个 inline box 组成一个 line box,可以理解为灰色的区域,因为在这个例子里就是由一个 line box 撑开了 div。如果有多行的文字,那就有多个 line box。

关于 content area,W3C 有一段这样的解释:

CSS 2.1 does not define what the content area of an inline box is (see 10.6.1 above) and thus different UAs may draw the backgrounds and borders in different places.

这篇文章对非替换元素 content area 的定义就是自有宽高加上 margin,padding 以及 border。我认为应该将 content area 理解为 content box。

line box 高度

浏览器会计算 line box 中每一个 inline box 的高度,对于不同的 inline box 计算方式有所不同:

如果是一个替换元素(比如 imginput),inline-* 元素或者是 flexbox 中的子元素,高度由其 margin box 决定;

inline-block 元素:

div {
  background-color: #ccc;
  color: #fff;
}
span {
  display: inline-block;
  height: 30px;
  margin: 10px;
  background: #fff;
  color: red;
}
<div>xxx<span>xxx</span>xxx</div>

这里 span inline box 的高度就是 height + margin 2。如果 height 的值是 auto,高度就是等于 line-height + margin 2。

如果是一个非替换元素,高度由它的 line-height 决定,而不是 content area,虽然有时候看起来像 content area 撑开了 line box 的高度。

div {
  background-color: #ccc;
  font-size: 20px;
  color: #fff;
  font-family: Sana;
}
span {
  background: #fff;
  color: red;
}
<div>xxx<span>xxx</span>xxx</div>

这张图片可以明显地看出撑开 line box 的是 line-height,而不是 content area。

这篇文章用了 virtual-area height 来表示 line-height 撑开的高度,而我的理解其实就是 inline box 的高度。

line box 中所有 inline box 的最高点以及最低点决定了它的高度(该计算包括了 strut 的高度,后文会提到 strut)。

非替换元素的的 margin,padding 以及 border 并不会影响 line box 高度的计算。当一个 inline-level box 的 line-height 小于 content area 的时候,line box 的高度就会小于 content area,此时元素的 background 以及 padding 等就会溢出到 line box 之外。

以下代码可以说明这个问题:

div {
    background: #eee;
    border: 1px solid #000;
    box-sizing: border-box;
    font-size: 50px;
    line-height: 10px;
}
span {
    background: red;
    margin: 10px;
    padding: 10px;
}
<div><span>xxx</span></div>

leading:

content area 的高度与 inline box 的高度差就是 leading,这个 leading 会等分被添加到 content area 的顶部与底部,所以说 content area 永远位于 inline box 的中间(垂直居中)。

strut:

浏览器认为每一个 line box 的起始位置都存在一个宽度为 0,没有任何字符的 匿名 inline box,称为 strut,这个 strut 是会从父元素继承 line-height 的,因此它的高度会影响整个 line box 高度的计算。

一个例子

div { background: #eee; border: 1px solid #000; box-sizing: border-box; }
<div><img src="./image.png" alt=""></div>

在图片中可以看到 img 与外层的 div 存在一个间隙,这就是上文提到的 strut 造成的。

在这个例子中,默认情况下 img 的底边与父元素的基线对齐(img { vertical-align: baseline }),而这个基线实际上就是 strut 基线所在的位置。如下图所示:

strut 其实就相当于一个不可见的字母 x,上文已经提到 strut 本身是具有 line-height 的,所以就导致图片底部多了一段间隙。

总结一下存在间隙原因:

  • strut 存在 line-height
  • vertical-align 默认值为 baseline

对应的解决方案:

  • 修改 strut 的 line-height,因为 strut 的 line-height 不是能够直接设置的,所以需要设置父元素的 line-height,然后让 strut 继承,或者修改 font-size
  • 将 vertical-align 设置为其他值line-height

W3C 中对于 line-height 的解释是这样的:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

我的简单理解是,对于由行内元素组成的块级元素而言,line-height 决定了 line box 的最小高度,浏览器会假定每一个 line box 以一个宽度为 0 的 inline box (strut)开始,而这个 strut 从父元素继承到 font 以及 line-height。

  • normal 是 line-height 的默认值,W3C 对它并没有一个明确的定义。normal 会将 content area 作为一个计算因素。
  • line-height 并不是两条 baseline 之间的距离。
  • line-height 的值推荐使用数值,而不是使用 em 单位,因为 em 单位会根据从父元素继承到的 font-size 来计算行高。

vertical-align

W3C 对 baseline 以及 middle 的定义如下:

baseline: Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

元素基线与父元素基线对齐,如果元素没有基线,比如 img,则使用 margin 底边与父元素基线对齐。

middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

元素的垂直中点位置与父元素的基线加上一半 x-height 的位置对齐。

参考

Deep dive CSS: font metrics, line-height and vertical-align
https://meyerweb.com/eric/css/inline-format.html
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
https://www.w3.org/TR/CSS2/visudet.html#inline-box-height


  • 本文相关:
  • css3动画之diy loading动画
  • 浅谈css 高度塌陷问题
  • 盘点css selectors level4中新增的选择器
  • css实现镂空效果的示例代码
  • css实现文字居中两边横线效果的示例代码
  • 详解css中position属性介绍(新增sticky)
  • 详解css bem书写规范
  • css如何绘制特殊图形的方法示例
  • css 同级元素浮动分析小结
  • 详解css中左上朝向三角形(top-left triangle)的几种制作方式
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved