【css】使用display:inline-block后,元素间存在4px的间隔

问题:在本地项目中使用【display: inline-block】,元素间存在4px间隔。打包后发布到外网又不存在这个问题了。

归根结底这是一个西文排版的问题,英文有空格作为词分界,而中文则没有。
此时的元素具有文本属性,只要标签与标签之间有间隔【换行符|空格|间隙】都会被当作以一个字体大小的空格,就会出现4px的间隙。而且在垂直方向上,文本的基线不同也会造成错位。

使用【display: inline-block】出现间隔,解决办法:

①在写代码时,全部写在一行上,移除了空格问题(代码可读性大大降低)。

②如果打包项目后未进行压缩处理,可以设置子元素(除第一个)【margin-left:-5px】。

③父级元素中【font-size:0】,再在子元素单独设置字体大小【font-size:14px】。

④父级元素中【letter-spacing: -5px】,再在子元素单独设置【letter-spacing: 0】。

⑤父级元素中【word-spacing: -5px】,再在子元素单独设置【word-spacing: 0】。

参考文章:拜拜了,浮动布局-基于display:inline-block的列表布局 « 张鑫旭-鑫空间-鑫生活

使用【display: inline-block】出现上下错位,解决办法:

①使子元素的高度相同。

②如果两个div高度不相同,可以使用【vertical-align: top|middle|bottom 】进行【上|中|下】对齐。

③使用【overflow: hidden】解决。

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

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

相关文章

基于深度学习的肿瘤图像检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要:在本博客中,我们深入探讨了基于YOLOv8/v7/v6/v5的肿瘤图像检测系统。核心上,我们采用了最新的YOLOv8技术,并将其与YOLOv7、YOLOv6、YOLOv5算法进行了综合整合和性能指标对比分析。我们详细阐述了当前国内外在此领域的研究现状…

python实现UDP服务器

import socket # 创建UDP socket udp_server_socket socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # 绑定地址和端口 server_address (localhost, 12000) udp_server_socket.bind(server_address) # 服务器循环 while True: # 接收客户端消息 message, c…

Python机器学习实验 Python 数据分析

1.实验目的 掌握常见数据预处理方法,熟练运用数据分析方法,并掌握 Python 中的 Numpy、 Pandas 模块提供的数据分析方法。 2.实验内容 1. Pandas 基本数据处理 使用 Pandas 模块,完成以下操作。 (1)创建一个由 0 到 50…

Ai音乐大师演示(支持H5、小程序)独立部署源码

Ai音乐大师演示(支持H5、小程序)独立部署源码

使用IntelliJ IDEA配置版本管理(SVN和Git)

一:SVN版本管理 步骤一:安装SVN插件 打开IntelliJ IDEA,点击顶部菜单栏的 "File" -> "Settings"。在弹出的窗口中,选择 "Plugins"。在搜索框中输入 "SVN",找到 "Su…

如何在Python中处理JSON数据?

如何在Python中处理JSON数据? 在Python中处理JSON数据是一个常见的任务,因为JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成。Python的内置库…

政安晨:【Keras机器学习实践要点】(十五)—— KerasTuner 简述

目录 导言 调整模型结构 定义搜索空间 开始搜索 查询结果 重新训练模型 调整模型训练 调整数据预处理 重新训练模型 指定调整目标 以内置指标为目标 以自定义指标为目标 调整端到端工作流程 将 Keras 代码分开 政安晨的个人主页:政安晨 欢迎 &#x1…

Web框架开发-Django-model进阶

一、QuerySet 可切片 使用python的切片语法来限制查询集记录的数目,它等同于SQL的limit和offset子句。 1 2 In [2]: Book.objects.all()[:5] # (LIMIT 5) In [2]: Book.objects.all()[5:10]     # (OFFSET 5 LIMIT 5) 不支持负的索引(例…

漫谈结构体

注意: 1.结构体是自定义数据类型,定义之后使用就跟使用库自带的int这些数据类型一样的。 2.定义结构体类型不会分配内存空间,定义变量才会。 1.匿名结构体(声明时创建变量,不然没啥用) 匿名结构体是没有定…

React 入门

一、官网地址 英文官网: https://reactjs.org/中文官网: https://react.docschina.org/ 二、React 特点 声明式编码组件化编码React Native 编写原生应用高效(优秀的 Diffing 算法)高效的原因:1.使用虚拟DOM,不总是直接操作页面…

vultr ubuntu 服务器远程桌面安装及连接

一. 概述 vultr 上开启一个linux服务器,都是以终端形式给出的,默认不带 ui 桌面的,那其实对于想使用服务器上浏览器时的情形不是很好。那有没有方法在远程服务器安装桌面,然后原程使用呢?至少ubuntu的服务器是有的&am…

搜索--找出克隆二叉树中的相同节点

题目描述 给你两棵二叉树,原始树 original 和克隆树 cloned,以及一个位于原始树 original 中的目标节点 target。 其中,克隆树 cloned 是原始树 original 的一个 副本 。 请找出在树 cloned 中,与 target 相同 的节点&#xff…

AGI时代,LLM可以在AutoML哪些环节进行增强?

当下大模型技术发展如火如荼,颇有改变各行业和各领域的架势。那么对于AutoML来讲,LLM对其有哪些助力?对于这个问题,我们来问一问kimi chat,看看它怎么回答? 大型语言模型(LLM)可以在…

React|获取oss存储的文件,并转为json格式

使用axios通过oss的url获取.xlsx文件流,处理后得到json格式数据: 安装xlsx: npm install xlsx import axios from "axios"; import * as XLSX from "xlsx";//#region xlsx(oss) to json async function getFileStream(u…

Successive Convex Approximation算法的学习笔记

文章目录 一、代码debug二、原理 本文主要参考了CSDN上的 另一篇文章,但规范了公式的推导过程和修缮了部分代码 一、代码debug 首先,我们将所有的代码放到MATLAB中,很快在命令行中出现了错误信息 很显然有问题,但是我不知道发生…

dm8用户配置免密登录

dm8用户配置免密登录 基础环境 操作系统:Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本:DM Database Server 64 V8 架构:单实例1 操作系统认证(sysdba) 1.1 官方文档 《DM8安全管理》手册 2 用户…

湖仓管理系统 Amoro部署

简介 Apache Amoro(incubating) 是一个构建在 Apache Iceberg 等开放数据湖表格之上的湖仓管理系统,提供了一套可插拔的数据自优化机制和管理服务,旨在为用户带来开箱即用的湖仓使用体验。 Amoro 的愿景是依托于 Apache Iceberg、Apache Paimon 等新型数据湖表格式的基础功…

Java:线程、进程、多线程

在Java中,线程、进程和多线程是实现并发编程的关键概念。理解它们的定义、特点和如何使用它们对于创建高效、响应迅速的应用程序至关重要。 进程(Process) 进程是操作系统分配资源和调度的基本单位,它包含了程序的执行状态和所需…

微信小程序媒体查询

在微信小程序中,media媒体查询不支持screen关键字,因为小程序页面是再webview中渲染的,而不是在浏览器中渲染的。 在设置样式时,可以使用 wxss 文件中的 media 规则来根据屏幕宽度或高度设置不同的样式。 device-width:设备屏幕…

redis 性能管理

一、查看 redis 内存使用 info memory 1, 进入 redis 查看 2, redis 外查看 二 内存碎片率 1,used_memory_rss 表示该进程所占物理内存的大小,即为操作系统分配给 Redis 实例的内存大小。 2,used_memory Redis …