问题描述
写css的时候遇到了一个小问题
div
只包含一个
img
元素,但是页面展示上
div
却比
img
高出一点。当时只觉得匪夷所思...找了半天自己样式的问题...情况如下图
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/3e7638941398c7334acfb5fa73d16887.png)
<!-- html部分 -->
<div class="header-pic">
<img class="" :src='headPic' />
<div class="linear-bg"></div>
</div>
//less代码
.header-pic {
position: relative;
border-radius: 10px 10px 0px 0px;
width: 100%;
img {
width: 100%;
background-size: cover;
}
.linear-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: rgba(51,51,51,0.10);
}
}
问题原因
后来查了一下资料,发现
img
元素后面会跟一个空白符,会使它的高度多出3px
至于为什么img元素后面会出现3px的空白呢~?因为
img
元素是行内元素,行内元素默认会有3px的间距。因此当我们的块级元素
div
包含这个行内元素的时候底部就出现了3px的间距。感谢@梦雨依依!
解决方案
设置
img
为
display:block
,空白就消失啦~~~
因为将img元素设置为块级元素,就不会存在默认间距了。
更多解决方案请参考