css 解决多张图片显示时出现的空白间隙问题

企业开发 2023-06-25 02:30:24 阅读次数: 0

1、出现的间隙

在后端设置富文本时，添加了多张图片，但是到前台展示时，每2张图片直接都会多出一个间隙；
在这里插入图片描述

2、空白间隙产生的原因

在网上查阅资料时，发现是由于图片设置了display: inline-block;属性，使图片变成行内块元素，这就是问题所在，display: inline-block;行内块元素会使得页面的图片与图片之间产生间隙；

3、解决办法

在网上查阅了一翻，找到以下几种解决办法

1、给图片元素设置vertical-align: top;
2、将图片设置成 display: block;
3、给图片所在的父元素设置 font-size:0;

猜你喜欢

转载自blog.csdn.net/DarlingYL/article/details/131309405
今日推荐
周排行
Access的四舍五入取整
8.23 前端学习过程
入门学习过程方向与漏洞复现总结：
操作分布式文件之八：如何批量并行读写远程文件和事务补偿处理
应邀出个教程 （搭建tensorflow跑网络环境）
Kubernetes之Pod控制器应用进阶
14-[mysql内置功能]--
HDU6212 区间dp 好题
VS2015生成代码图
验证手机号的工具类
每日归档
更多
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)
2024-10-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022