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

news2024/11/26 4:33:27

1、出现的间隙

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

2、空白间隙产生的原因

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

3、解决办法

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/666651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

任意分频器电路设计

目录 任意分频器电路设计 1、任意偶数分频器电路设计 1.2、实验任务 1.3、程序设计 1.3.1、代码如下: 1.3.2、编写仿真 TB 文件 2、任意奇数分频器电路设计 2.1、实验任务 2.2、程序设计 2.2.1、奇数分频电路代码 2.2.2、编写仿真 TB 文件 2.2.3、仿真验…

关于前端项目安全问题的一些思考

1.路由守卫,本地路径与本地存储加密后的该用户所有能访问的的路径列表对比,是否有权限,这个要搞个一级页面-二级页面三级页面这种记录下来,后台管理员开启后赋予用户访问某些页面的权限,即能打开相关菜单的权限&#x…

【吴恩达老师《机器学习》】课后习题2之【逻辑回归(logistic_regression)】

逻辑回归-线性可分 用于解决输出标签y为0或1的二元分类问题 判断邮件是否属于垃圾邮件?银行卡交易是否属于诈骗?肿瘤是否为良性?等等。 案例:根据学生的两门学生成绩,建立一个逻辑回归模型,预测该学生是否会被大学录…

卷积码编码器的结构与表示

本专栏包含信息论与编码的核心知识,按知识点组织,可作为教学或学习的参考。markdown版本已归档至【Github仓库:https://github.com/timerring/information-theory 】或者公众号【AIShareLab】回复 信息论 获取。 文章目录 卷积码基础卷积码的…

Oracle数据库startup mount时的报错处理(ORA-01078LRM-00109)

安装监听 Disconnected [oraclerac1 ~]$ netcaOracle Net Services Configuration:[oraclerac1 ~]$ sqlplus / as sysdbaSQL*Plus: Release 11.2.0.4.0 Production on Tue Jun 20 22:50:36 2023Copyright (c) 1982, 2013, Oracle. All rights reserved.Connected to an idle …

学习adaboost(三,第二次迭代,c#实现)

我们改进了第一次迭代:第二次迭代如下:因为三个弱分类器都是犯了3次错误,我们故意选了y>6.5,标签1,else,标签-1;第一个弱分类器已经选了,再选一次没意义,不会有任何进展&#xff…

搞钱!如何拿下奖金534万的全国人工智能大赛?

嗨咯,大家好,我是K同学啊! 介于最近训练营中经常有同学问我,有哪些比较好的知识变现渠道,这几天整理出了一个个人认为还不错的关于深度学习方面的大赛(就奖金比较多而已)分享给大家。 攻略 | …

prisma 结合 mongodb 查询地理空间坐标,实现 “附近的人”功能

前言:我们创建一个集合,添加测试数据,并执行 mongodb 的地理空间查询,返回需要的数据。 1、通过schema.prisma, 创建 store 集合 2、通过 prisma/client ,插入 几条测试数据 // 构造测试数据createList: async () >…

CMIP6数据处理方法与典型案例分析

气候变化关系到农业、生态系统、社会经济和人类生存与发展,是当今世界关注的重点问题之一。IPCC(Intergovernmental Panel on Climate Change)第6次评估报告指出,自 20 世纪 50 年代以来,从全球平均气温和海温升高、大…

Seata TCC 模式下解决幂等、悬挂、空回滚问题 | Spring Cloud56

一、前言 通过以下系列章节: docker-compose 实现Seata Server高可用部署 | Spring Cloud 51 Seata AT 模式理论学习、事务隔离及部分源码解析 | Spring Cloud 52 Spring Boot集成Seata利用AT模式分布式事务示例 | Spring Cloud 53 Seata XA 模式理论学习、使用…

antd-vue - - - - - date-picker组件在非本地不好使?无法切换日期?

date-picker组件在非本地不好使?无法切换日期? 1.问题描述2.问题原因 & 解决办法 离离原上谱,真的是离了大谱 记录一个深深的踩坑记录!!! 选择日期,肯定要选择ui组件的date-picker&#xf…

tensorflow基础知识

计算图的理解 ref: https://zhuanlan.zhihu.com/p/344846077 计算图模型由节点(nodes)和线(edges)组成,节点表示操作符/算子Operator,线表示计算间的依赖。实线表示有数据传递的依赖,传递的数…

【LeetCode】HOT 100(17)

题单介绍: 精选 100 道力扣(LeetCode)上最热门的题目,适合初识算法与数据结构的新手和想要在短时间内高效提升的人,熟练掌握这 100 道题,你就已经具备了在代码世界通行的基本能力。 目录 题单介绍&#…

three.js中通过gsap动画库实现物体的动画

一、什么是gsap GSAP(GreenSock Animation Platform)是一个JavaScript动画库,由GreenSock公司开发,用于在Web应用程序中创建高性能动画。 使用GSAP可以通过一些简单的动画操作来实现复杂的动画效果,例如TweenLite、T…

临期商品app小程序软件开发

临期商品APP小程序是一种专门销售或推广临近保质期商品的应用程序,以下是可能有助于临期商品APP小程序软件开发的功能: 商品展示:允许用户查看和浏览不同种类的临期商品,包括产品图片、描述、价格等信息。 用户登录和注册…

笔记:WebRTC 网络技术理论与实战(二)

WebRTC技术笔记 笔记:WebRTC 网络技术理论与实战(一) 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.n…

【Flutter——复选框实例代码超详细讲解!】

Flutter——复选框实例代码超详细讲解! 文章目录 Flutter——复选框实例代码超详细讲解!代码实现效果代码实例代码结构总结 代码实现效果 代码实例 import package:flutter/material.dart; // 导入 Flutter 的核心库void main() {runApp(const MyApp())…

linux-2.6.22.6内核poll总结

1.为什么需要poll,其原因是当进行某些操作时,该操作会一直消耗cpu,浪费资源,所以引入poll可以让该进程在指定时间内如果没有结果产生(可以是某个操作或者获取数据)则进行休眠,这样就会释放cpu。…

【MySQL】数据库基础 ②

✍LIKE 子句 说明: 使用 SELECT 来查询数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录。 WHERE 子句中可以使用等号 来设定获取数据的条件,如 "字段(text_title) 值()"。 但是有时候我们需要获取 text_…

Android 神奇的 SpannableStringBuilder

文章目录 前言一、SpannableStringBuilder 是什么?二、使用步骤1.示例代码2.参数对应start:样式生效的开始位置,包括该位置end: 样式结束的位置,不包括该位置flags:取值有如下四个Spannable.SPAN_EXCLUSIVE…