css解决图片底部留白问题

最新推荐文章于 2022-01-30 23:15:10 发布
最新推荐文章于 2022-01-30 23:15:10 发布
阅读量352 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33414202/article/details/105503417
版权

在循环商品详情图片时,发现每个图片有白色间隔,但是并没有设置margin,padding

 

造成原因:

　　图片的display属性默认inline,而这个属性的vertical-align的默认值是baseline.所以就会出现上图的情况（图片底部出现一个小留白区域）

解决方法:

　　第一种方法:将img的vertical-align设置为middle

　　第二种方法:将img设为display:block

 

开心快乐一天又一天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS解决文字环绕图片问题的代码
10-30
使用CSS解决文字环绕图片问题的代码
CSS图片底部留白的解决办法
Delete_89x的博客
10-27 2443
问题描述： div里放了个图片，底部留白，用了padding:0，没去掉，记录一下。 原因分析： img元素默认是inline元素，而inline元素的vertical-align属性的默认值为baseline，也就是文字基线对齐，所以图片底部的留白就是baseline和bottom之间的距离。 解决方案： 使用display: block;将img转换成block元素即可。 重写默认的vertical-align: baseline;，建议设置为vertical-align: middle; 设置图
php怎样让背景图片不重复,CSS如何实现背景图像重复效果
weixin_39672160的博客
03-16 176
背景图像重复效果，相信大家都有在各大网站上见过。一个好看的背景图片重复效果，可以使我们的网页样式更加美观，内容更加丰富。我们可以通过CSS中background的相关属性来实现这种效果。推荐参考：《CSS教程》下面我们就通过简单的代码示例，给大家介绍css实现背景图像重复的效果。代码示例如下：body{background-image: url(img/154e.png);background-r...
css如何去掉图片里面存在的背景色
chengxue_123的博客
05-18 4760
对于图片外的背景颜色，可以使用background-color:transparent; 对于图片里面的背景色，那么可以用ps处理，或者css处理，去掉背景色 .selectCaiLiao{ display: block; //不是块元素，想设置宽高有用可以这样处理 width:100%; height: 38px; background: url("../../../css/zTreeS...
CSS解决文字环绕图片问题
09-27
上图是美工为一站点制作的图文并茂的新闻标题列表，采用表格进行布局，右上和下部分分布在两个单元格中，程序实现起来可不太容易：要么分两次查询，一次取4条...能不能通过设置图片的属性，让文字和图片像Word中一样可
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__...
CSS完美解决前端图片变形问题的方法
11-21
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下： 一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height:...
IE6下CSS图片缓存问题解决方法
12-02
用一句代码即可搞定： 代码如下: document.execCommand(“BackgroundImageCache”, false, true); 当然为了其它浏览器上能正常通过，需要做下判断后调用，才更安全： 代码如下: if(Browser.isIE6){ try{ document....
CSS图片底侧空白缝隙解决方案
Moony_wy的博客
01-30 3327
这篇文章介绍了CSS图片底侧空白缝隙解决方案。 这篇文章介绍了一个常见的bug：图片底部空隙问题。 我们发现出现问题的原因是由于元素默认的对齐方式为基线对齐vertical-aligh: baseline。 解决方法： 1. 给图片添加vertical-align: middle|top|bottom 2. 给图片添加display: block
CSS解决div里面img图片下方有空白的问题
weixin_43509051的博客
07-31 2699
今天项目里面用到一个div下的img图片的下方有一小片明显的空白的问题，查了一下这个问题的原因，对img标签有了更加进一步的理解，原文：https://www.jianshu.com/p/2af064692505 产生这部分空白区域的原理。 图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课），而这个属性的vertical-align的默认值是baselin...
用css实现绝对居中和怎么更简洁居中一个img,解决img留白
HDdgut的博客
08-15 1618
第一种： 伸缩盒子，要定义在父类 display: flex; justify-content: center; //水平居中 align-items: center;//垂直居中 注意：不能加margin，否则无效，padding（是否能加？） 第二种：不知道盒子长宽：（比较好） 垂直水平居中：top、right、...
图片底部留白的解决方法
米老头
02-16 1350
有时候，我们并未给图片（img标签）设置margin-bottom值，在有一些浏览器里也会出现底部留白。下面，就介绍几种方法来解决这个问题。 1）把图片设为块级元素 如：img{display:block;} 2）设置图片的垂直对齐方式 如：img{vertical-align:top;}(vartical-align的值可选，text-top，bottom，text-bottom
图片底部留白怎么处理
weixin_43332220的博客
02-09 1435
行高指的是上下文本行高之间的基线距离 行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。 行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。 从上到下四条线分别是顶线、中线、基线、底线。我们知道display=inline的元素的vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。 vertica...
css使用@keyframes首次加载图片循环会出现白色间隙
weixin_45634433的博客
07-14 254
问题解说: 在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示 实现代码 //html <div class="container"> <div class="first"> </div> </div> //less .container { width: 100vw; height: 100%; } .container .firs
div + css 布局中的一些小技巧去 除图片底部空白缝隙（四）
Y_xxxxx的博客
10-28 588
如上图，给div加了边框之后会发现 图片和div的底部有一点间隙，产生的原因是因为：图片默认是按照基线对齐的，不是按照底部对齐 解决这问题有两个办法 方法1：修改vertical-align属性， 只要不是按照基线对齐就不会有这个问题 /* css */ div { width: 200px; border: 3px solid skyblue; } img { vertical-al.
vertical-align垂直居中( 消除html中图片下边缘留白 )
yijiupingfan0914的博客
06-21 590
一、vertical-align支持4大类： 1.线类： baseline(默认值), top, middle, bottom 2.文本类：text-top, text-bottom 3.上标下标类：sub, super 4. 数值百分比类： 20px, 2em, 20%....... /*********************************************...
html中图片上下左右留白,vertical-align垂直居中( 消除html中图片下边缘留白 )
weixin_35869861的博客
06-09 1699
一、vertical-align支持4大类：1.线类： baseline(默认值), top, middle, bottom2.文本类：text-top, text-bottom3.上标下标类：sub, super4. 数值百分比类： 20px, 2em, 20%......./***********************************************************...
定位底部给负值留白怎么解决
最新发布
05-26
在定位底部时，给负值留白可以通过以下两种方式来解决： 1. 使用绝对定位和transform属性 ```css .footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; transform: translateY...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值