html中如何让两张图片的间隙消失,css怎样处理图片间隙问题？

css怎样处理图片间隙问题？下面本篇文章给大家介绍一下CSS图片间隙产生的原因及解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

图片水平间隙

现象：当多张图片横向排列时，会产生一定间距

-如下图所示(红色部分为间隙)

原因：img元素之间的换行符会被当成空格处理

解决方法：

1、img元素紧挨着写

2、设置父对象的文字大小为0px;(虽能解决问题，但不推荐使用).img_box{

font-size: 0px;

}

效果如下图所示

可以清晰地看到图片之间的间隙消失了

3、设置图片的浮动属性，和overflow：hidden;超出部分隐藏配合使用.img_box{

overflow: hidden;

}

img{

float:left;

}

效果如下图所示：

图片垂直间隙

现象：当多张图片垂直排列时，会产生一定间距

-如下图所示(红色部分为间隙)

原因：图片默认基线对齐，即(vertical-align:baseline)

解决方法：

1、设置图片的对齐方式，可把vertical_align的值设置为top、middle、bottom等。img{

vertical-align: bottom;//这里只展示一种，其他属性值也可，只要不是“inherit”属性值和默认属性值

}

知识补充：

vertical-align 属性设置元素的垂直对齐方式。baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length

% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。

inherit 规定应该从父元素继承 vertical-align 属性的值。

效果如下：

2、图片块状化(块状元素不存在基线对齐)img{

display:block;

}

效果如下：

3、设置图片的浮动属性，原理：创造一个BFC环境(由于浮动元素没有高度，为解决高度塌陷问题，一般配合overflow:hiddren使用)img{ float: left; }

.img_box{

width: 800px;

margin: 100px auto;

background-color: red;

border:1px solid black;

overflow:hidden; //父级设定超出部分隐藏，可以解决高度塌陷问题

}

效果如下图所示：

4、设置父对象的文字大小为0px;(缺点：父对象不能有文字，且无实际意义).img_box{ font-size: 0px;}

效果如下图所示

5、行高足够小，使基线上移.img_box{ line-height: 0px;}

效果如下图所示

更多web前端相关知识，请查阅 HTML中文网 ！！