网站开发进行前端设计的时候,我们通常要对列表页进行布局设计,布局设计中*重要的一个步骤就是使用CSS对列表进行等距离排列。
如下图,我们有4列图片,希望他们之间的间距是相等的,如何实现这个效果呢?

一开始肯定会考虑到使用padding或者margin来撑开图片与图片的间距,但是怎么设置值呢?
每个图片块左浮动,宽22%,左外边距2.5%。
那么(约等于100%)98%=22%*4+2.5%*4
img {
display: block;
width: 22%;
margin: 2.5% 0 0 2.5%;
float: left;
}

参考网址:https://www.jb51.cc/css/456641.html