给 div 和 span 元素设置 line-height 为 0,为什么 div 几乎失去了高度,但 span 的高度没有受到影响?

147 天前
 hblevins

https://jsbin.com/hujodilogi/edit?html,output

1117 次点击
所在节点    CSS
4 条回复
QAQqingju
147 天前
块级元素和行内元素
tool2dx
147 天前
这属于 css 基本知识了。一个是 block 元素,另一个是 inline 元素。

inline 元素设置高度,只能用过设置字体的大小,也就是 font-size ,你设置 line-height 没用。
rabbbit
147 天前
chnwillliu
111 天前
span 或者说 inline boxes 有两个高度,一个是它的 content area 的高度,由第一个可用字体的上升下降线决定;第二个高度是它在 line box 中占的逻辑高度,由 line-height 控制,将来还会有 text-box-edge 这种东西来结合字体中的各种基线来控制。

span 的 background border 都是放 content area 上,包括 getBoundingClientRect 。

而它的逻辑高度配合 vertical-align 和其他同行的盒子,一起构成行盒的高度,最后体现在 div 这个 block container 的高度上。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1053054

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX