问题描述:
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
众所周知,多个img
并列显示时会有几像素间距,但是这并不是img
标签特有的特性。
<style>
div{
display: inline-block;
width: 200px;
height: 200px;
background: #f40;
}
</style>
<div></div>
<div></div>
<div></div>
将div设置为inline-block属性之后,div标签之间也会存在间距
内部原理:
实际上,所有
display
属性为inline
,inline-block
的盒模型都会有文字特性,间距就是由于两个标签之间的空白引起的。
常用解决方法:
1. 删除标签之间的空格:
<img src="img/test.jpg" alt=""><img src="img/test.jpg" alt=""><img src="img/test.jpg" alt="">
2. 将父级设置为font-size: 0px:
<div style="font-size: 0px">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
</div>
3. 将父级设置为使用负margin去除边距
<style>
img {
margin-left: -8px;
}
</style>
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
4. 设置浮动
<style>
img {
float: left;
}
</style>
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">