css样式中解决一个img图片放在div盒子中的时候上方の空白行
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css样式中解决一个img图片放在div盒子中的时候上方の空白行相关的知识，希望对你有一定的参考价值。
css样式中解决一个img图片放在div盒子中的时候上方の空白行
上面的这个绿色箭头线就是空白行，那么他是如何产生的呢；
他就是一个空白行
我的这个盒子是这个css样式，图片也做了绝对定位！
效果不是我们想象中的样子！
.carousel
width: 100%;
height: 33.3vw;
position: relative;
left: 0;
top: 0;
.carousel>img
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
解决方法:
- 给div盒子在加一条样式：
font-size:0，因为div的换行导致的空白； - 给div盒子添加一个边框：
border: 1px solid transparent;，当然这里还是有1px间隙，但是这么细，谁有能发现嘞。（除了自己💥）
ul列表块垂直居中
top:50%;//视口的50%
transform: translate(0,-50%);//相对于自身向上走50%
以上是关于css样式中解决一个img图片放在div盒子中的时候上方の空白行的主要内容，如果未能解决你的问题，请参考以下文章