css怎样处理图片间隙问题?

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

图片水平间隙

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

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

1.png

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

解决方法:

1、img元素紧挨着写

<img src="./小僵尸.jpg" alt="小僵尸图片"><img src="./小僵尸.jpg" alt="小僵尸图片"><img src="./小僵尸.jpg" alt="小僵尸图片">

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

.img_box{ 
font-size: 0px;
}

效果如下图所示

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

2.png

3、设置图片的浮动属性,和overflow:hidden;超出部分隐藏配合使用

 .img_box{
     overflow: hidden;
}
img{
      float:left;
}

效果如下图所示:

3.png

图片垂直间隙

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

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

4.png

原因:图片默认基线对齐,即(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 属性的值。

效果如下:

5.png

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

img{
   display:block; 
}

效果如下:

6.png

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

img{  float: left; }
.img_box{
            width: 800px;
            margin: 100px auto;
            background-color: red;
            border:1px solid black;
             overflow:hidden; //父级设定超出部分隐藏,可以解决高度塌陷问题
        }

效果如下图所示:

7.png

4、设置父对象的文字大小为0px;(缺点:父对象不能有文字,且无实际意义)

.img_box{ font-size: 0px;}

效果如下图所示

8.png

5、行高足够小,使基线上移

 .img_box{ line-height: 0px;}

效果如下图所示

9.png

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

以上就是css怎样处理图片间隙问题?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏