CSS图片间隙产生的原因及解决方法

您所在的位置：网站首页 › origin图导入word有时候单词间有空隙 › CSS图片间隙产生的原因及解决方法

CSS图片间隙产生的原因及解决方法

2024-06-30 19:11| 来源: 网络整理| 查看: 265

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等。 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;}

效果如下图所示在这里插入图片描述以上是我能找到的所有方法，希望能帮助到大家！！！

【本文地址】

CSS图片间隙产生的原因及解决方法

CSS图片间隙产生的原因及解决方法

今日新闻

推荐新闻