关于一个16px的span为什么占用21px的空间
原创关于一个16px的span为什么占用21px的空间
原创
前言
不知道大家有没有注意到，我们在浏览器中，设置了一个16px的span标签，但实际却占用了21px的高度，比如下图：
浏览器默认样式
上述这个情况是由浏览器默认样式造成的，浏览器对于行级元素有默认的font-size和line-height，webkit的默认font-size:16px,line-height:1.32。
所以我们只需要重置浏览器默认的line-height就可以设置这个span占多大高度了。
比如我们设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body{
margin: 0;
padding: 0;
line-height: 1;
}
span{
font-size: 16px;
}
</style>
</head>
<body>
<div>
<span style="line-height: 1;">first</span><span>second</span>
</div>
</body>
</html>我把line-height重置为1了，span的高度应该就是16px，也就是字体的大小，我们来看看。
我们可以看到span的高度还是21px，但是div的高度确实16px了。
是因为给行级元素设置line-height是没有效果的，所以我们给span加上display:inline-block才能使line-height生效。
果然，成为内联元素生效了。
但是在内联盒中，有一个渲染规则，就是没个内联元素后面都会由一个空白节点，而且此空白节点拥有该元素的line-height和font-size属性。
strut空白节点
我们继续来看个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
margin: 0;
padding:0;
color: cyan;
}
span {
background-color: white;
font-size: 16px;
display: inline-block;
}
.box{
background-color:burlywood;
color: black;
}
</style>
</head>
<body>
<div class="box"><img src="12.jpg"></div>
</body>
</html>效果如下：
为什么图片下面会有缝隙呢？这就是那个strut空白节点搞的鬼，由于这空白节点拥有浏览器默认的line-height和font-size属性，虽然我们看不到这个节点，但是它却存在，且占有空间。
大家记住，img标签不用设置line-block，img自身就是一个内联元素。
为了更直观的让大家看到这个空白节点，我在后面放一个span标签，让大家看看是如何产生这条缝隙的。
大家应该清楚是如何产生的吧，浏览器默认的line-height大概是1.32左右，加上默认的对齐方式都是基线对齐：
vertical-align: baseline。
所以图片对齐了文字的基线，导致了下面的缝隙。
解决方法
1：设置vertical-align属性即可，把对齐方式改为top，bottom，middle都可以。
2：直接让img变为块级元素，也就没有空白节点了，但是img标签就要独占一行了。
3：直接将父元素font-size：0，字体都为0了，line-height自然也没作用了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。