CSS图片间隙产生的原因及解决方法
图片水平间隙
现象:当多张图片横向排列时,会产生一定间距 -如下图所示(红色部分为间隙) 原因:img元素之间的换行符会被当成空格处理解决方法:1.img元素紧挨着写
![小僵尸图片](./小僵尸.jpg) ![小僵尸图片](./小僵尸.jpg)
2.设置父对象的文字大小为0px;(虽能解决问题,但不推荐使用)
.img_box{
font-size: 0px;}
效果如下图所示可以清晰地看到图片之间的间隙消失了 3.设置图片的浮动属性,和overflow:hidden;超出部分隐藏配合使用
.img_box{
overflow: hidden;
}
img{
float:left;
}
效果如下图所示: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190326202754227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODU1MDc0,size_16,color_FFFFFF,t_70)
图片垂直间隙
现象:当多张图片垂直排列时,会产生一定间距 -如下图所示(红色部分为间隙) 原因:图片默认基线对齐,即(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;}
效果如下图所示 以上是我能找到的所有方法,希望能帮助到大家!!!
|