CSS3 提供了很多图片处理的新功能,其中一项是使图片紧贴,也就是没有间隔地贴在一起。
img { display: block; /*将图片设置为块级元素*/ float: left; /*让图片向左浮动*/ margin-right:-4px; /*设置图片间距为 -4px,从而紧贴*/ }
代码中的display: block;
把图片变成块级元素,这样它就会在自己的行里,而不是与前一个元素换行。接着,float: left;
让图片向左浮动,这样它可以与前面的图片拼成一行。最后,margin-right: -4px;
是将图片之间的间距设置为负值。这个值一般设置为图片的宽度的负数,这样就可以实现紧贴的效果。
需要注意的是,如果图片的大小是不同的,使用margin-right
没有效果,可以使用CSS3 的nth-child(n)
伪类来对每个图片单独设置样式。
img:nth-child(1) { margin-right: -4px; } img:nth-child(2) { margin-right: -6px; } img:nth-child(3) { margin-right: -2px; }
以上是一个简单的紧贴图片的方法,使用它可以使图片在页面上更美观。