问题如图片一,还原设计图时,出现空隙
解决方案:思路,div和img去掉border,然后对应的边距都设置为0,图片设置为块级元素,会自动沾满div的空间。
.fgw-p-m-0{
padding: 0!important;
margin:0 !important;
img{
display: block;
}
}
<div>
<div className="fgw-p-m-0">
<img src="/static/image/heard.png" alt=""/>
</div>
<div className="fgw-p-m-0">
<img src="/static/image/green.png" alt=""/>
</div>
<div className="fgw-p-m-0">
<img src="/static/image/yellow.png" alt=""/>
</div>
<div className="fgw-p-m-0">
<img src="/static/image/gray.png" alt=""/>
</div>
<div className="fgw-p-m-0">
<img src="/static/image/footer.png" alt=""/>
</div>
</div>
解决后的效果图
解决方案二和三(在块级元素上设置font-size:0 或者 使用line-height:0)
.fgw-p-m-0{
line-height: 0;
img{
/*display: block;*/
}
}