img有行内块特点,行内块元素之间存在间隙‘
以此代码为例
<div class="box">
<img src="./tutu.jpg" alt="">
<img src="./tutu.jpg" alt="">
</div>
原因:
行内块元素:
存在换行,空格,回车等操作时,浏览器解析默认会有空格。
解决方法:
法一:
将两个照片标签放在一行
<div class="box">
<img src="./tutu.jpg" alt=""><img src="./tutu.jpg" alt="">
</div>
但是这样就没有遵循Web标准来开发(HTML编写网页结构和内容,CSS控制布局,文本/图片等的显示样式)
结构与表现分离:HTML标签只搭建网页的基本结构。CSS设置网页的所有的样式。
不要因为样式调不出来,而修改网页结构。因为后期还要对网页进行维护,网页结构要简单易懂才行。
法二:
父元素设置:font-size:0px;
.box {
width: 800px;
height: 400px;
background-color: rgb(117, 51, 216);
font-size: 0;
}
但是,如果父元素有文字,会让文字大小一块变化(文字大小变成0)
法三:
margin设置为负值
我这里的图片,设置-5px即可,根据自己的图片进行微调即可
img:last-child {
margin-left: -5px;
}
但是,需要自己对每个元素间的距离进行微调,如果空格占位(大小)发生改变,需要把每一个元素间距离再次进行修改。
法四:
父元素设置为弹性布局,
子元素必须设置宽高,不设宽高,图片将会铺满父级(可能有其他方法处理)
同时宽高要比子级大
.box {
width: 500px;
height: 300px;
background-color: rgb(117, 51, 216);
display: flex;
}
img {
width: 200px;
height: 200px;
}
此时才能实现。
法五:
添加float属性(浮动)
添加在需要浮动的元素身上,这里添加在图片身上。
img {
float: left;
}