span 元素自带间距??

一:问题发现

先说结论:没有

今天练手的时候发现一个有趣的现象 。

这是我的代码部分截图

span 元素自带间距??_第1张图片

span 元素自带间距??_第2张图片

再改为 p 段落+span 的结构后:

span 元素自带间距??_第3张图片

 span 元素自带间距??_第4张图片

 ??span 标签使用后  出现了 行之间的间距 这是因为span标签自带 padding-top 或者 margin-top吗?

我们F12进入深入思考

p标签都是

单纯的内容都为

span 元素自带间距??_第5张图片

那么可以判断 出现间距增大的原因是因为span的出现 难道是span出现了间距??

我们观察:

span标签

span 元素自带间距??_第6张图片

line-height:2  2为2rem 是根元素的两倍 即32px   调整line-height:1 16px

发现span 元素自带间距??_第7张图片

 恢复无span时的状态

?但是显示padding margin 为 0

二:解释原因

我们先看看css 的line-height 模型

span 元素自带间距??_第8张图片

line-height:2时我们的内容中  font-size没有变化 为16px 多余的部分 成为了半行距

半行距:content内容与内容顶部的距离

padding:content内容与boder间的间距

margin:border外 元素与元素之间的间距

span 元素自带间距??_第9张图片

 你理解到了吗 内容中也是分为几个部分 line-height 知识扩大了内容的中的width 不影响间距

你可能感兴趣的:(前端,html,前端,css)