为什么css图片之间有间隙?怎么解决?

html-css09

为什么css图片之间有间隙?怎么解决?,第1张

太久没用的东西,偶然用到,竟然忘记了,所以记录一下,加深一下印象

图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。

1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。

上面3中对齐方式都可以

vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。

2.将img通过display: block转为块级元素。

转为块级元素之后,就不存在和父级盒子基线对齐的问题了。

看下你上面的背景所在DIV和下面那个背景所在DIV是否有设置margin属性,如果有把它们改成0试。

如果你是表格进行上下拆分合并的,看下是表格是否设置有cellpadding,cellspace属性,如果有把它们改成0试试。

css图片中间添加空白区域按照以下步骤弄。

1、将图片转化为块级对象。

2、设置图片的垂直对齐方式。

3、设置父对象的文字大小为0px。

4、改变父对象的属性。

5、设置图片的浮动属性。

6、取消图片标签和其父对象的最后一个结束标签之间的空格。