当前位置：首页 > news >正文

span与span之间的空白如何解决？

news 来源：原创 2025/8/3 11:21:07

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>标题</title> <style>div{background: yellow;}span:first-of-type{background: red;}span:last-of-type{background: blue;}</style>
</head>
<body><div><span>文本1</span><span>文本2</span></div> 
</body>
</html>

效果如下所示、存在空白：

主要原因：

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响

解决方法1：

不写换行、紧凑编写

<span>文本1</span><span>文本2</span>

解决方法2：

将 span 的父元素的字体大小设置为 0，这样 span 之间的空格也会消失。然后需要在 span 元素上重新设置字体大小为你想要的值。

      div{background: yellow;font-size: 0px;}span:first-of-type{background: red;font-size: 20px;}span:last-of-type{background: blue;font-size: 20px;}

解决方法3：

将父元素设置为 display: flex;，使子元素（span）紧密排列，可以消除子元素之间的空白。

        div{background: yellow; display: flex;}

解决方法4：

将span元素设置为浮动（如float: left;），这样可以使它们紧密排列。但使用浮动布局时需要注意清除浮动，以避免对后续元素产生影响。

     div{background: yellow;   }div::after{clear:both;content:"";display: block;}span:first-of-type{background: red;    float: left;}span:last-of-type{background: blue;   float: left;}

最后效果：

span与span之间的空白如何解决？

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>标题</title> <style>div{background: yellow;}span:first-of-type{background: red;}span:last-of-type{background: blue;}</styl…...

编程日记 2025/8/3 11:21:07

2024年MathorCup数学建模B题甲骨文智能识别中原始拓片单字自动分割与识别研究解题全过程文档加程序

2024年第十四届MathorCup高校数学建模挑战赛 B题甲骨文智能识别中原始拓片单字自动分割与识别研究原题再现： 甲骨文是我国目前已知的最早成熟的文字系统，它是一种刻在龟甲或兽骨上的古老文字。甲骨文具有极其重要的研究价值，不仅对中国文…...

编程日记 2025/7/29 8:48:16

3.23学习总结

字符串 String java.lang,String 类代表字符串，Java程序中所有的字符串文字都为此类的对象字符串的内容是不会发生改变的，它的对象在创建之后不能呗更改字符串的内存模型当使用双引号直接赋值时，系统会检查该字符串在串池中是否存在。 …...

编程日记 2025/7/25 5:21:03

RT-Thread CI编译产物artifacts自动上传功能介绍

近期在RT-Thread开源项目中，我们引入了一项实用的功能改进——将每次CI（持续集成）编译生成的产物（artifacts）自动上传到GitHub，方便开发者和用户能够更便捷地获取和测试最新的编译结果。参考链接&#xf…...

编程日记 2025/8/3 11:21:06

Android adb调试应用程序

启动app 有的时候app不是预先安装的，也不能从界面start一个app，这时需要后台拉起app。 $adb shell am start package.name/Activity.name 例如，android原生camera app， 包名为com.android.camera2， mainActivity名为…...

编程日记 2025/8/3 11:19:52

仅靠prompt，Agent难以自救

Alexander的观点很明确：未来 AI 智能体的发展方向还得是模型本身，而不是工作流（Work Flow）。还拿目前很火的 Manus 作为案例：他认为像 Manus 这样基于「预先编排好的提示词与工具路径」构成的工作流智能体，…...

编程日记 2025/8/3 11:19:53

【嵌入式学习2】函数

目录 ## 函数 ## 函数分类 ## 函数定义 1、无参数无返回值 2、有参数无返回值 3、有参数有返回值 ## 函数声明 ## 局部变量和全局变量 ## 多文件编程如何避免把同一个头文件 include 多次，或者头文件嵌套包含？ 命令行编译文件头文件包含的…...

编程日记 2025/8/2 23:56:05

平芯微PW5012应用电路

PW5012应用电路板介绍： 1.1 单节和两节锂电池升压 12V 或 9V， 1A 至 3A 电路板， 1.2 应用： 升压电压转换板 1.3 VIN 输入电压： 3V-9V 1.4 VOUT 输出电压： 9V 2A（VIN3.7V） &#xff0…...

编程日记 2025/8/3 11:18:12

Langchain4J框架相关面试题

以下是关于Langchain4J框架的面试题目及答案 ### Langchain4J基础概念类 1. **Langchain4J框架是什么？它的核心功能有哪些？** Langchain4J是一个用于构建语言模型应用的Java框架，它为开发者提供了一套简洁高效的API，使得在Jav…...

编程日记 2025/8/3 1:36:58

【MySQL】用户管理

目录一、用户1.1 用户信息1.2 创建用户1.3 删除用户1.4 修改用户密码1.4.1 用户修改自己密码1.4.2 root用户修改指定用户的密码二、数据库的权限2.1 给用户授权2.2 回收用户权限结尾一、用户 1.1 用户信息 MySQL中的用户，都存储在系统数据库mysql的user表中。…...

编程日记 2025/8/3 11:21:07

5.高频加热的原理与常用集成电路介绍

一、高频加热的类型利用高频电源加热通常由两种方法：电介质加热（被加热物体绝缘）与感应加热（被加热物体导电），详细解释如下： 电介质加热（利用高频电压的高频电场导致物体自身分子摩…...

编程日记 2025/8/3 11:14:09

Elasticsearch：可配置的推理 API 端点分块设置

作者：来自 Elastic Daniel Rubinstein Elasticsearch 开放推理 API 现已支持可配置的分块，以便在文档摄取时处理语义文本字段。 Elasticsearch 推理 API 允许用户利用各种提供商的机器学习模型执行推理操作。其中一个常见用例是在索引中支持用于语义搜索…...

编程日记 2025/8/3 11:14:11

从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.1.2多头注意力扩展与掩码机制（因果掩码与填充掩码）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 2.1.2 多头注意力扩展与掩码机制（`因果掩码与填充掩码`）1. 多头注意力机制：分治策略的数学实现1.1 多头注意力核心公式2. 逐行代码实现2.1 多头拆分与合并3. 掩码机制：注意力控制的核心技术3.1 因果…...

编程日记 2025/8/3 11:17:02

Scikit-learn模型评估全流程解析：从数据划分到交叉验证优化

模型评估的步骤、scikit-learn函数及实例说明 1. 数据划分（Train-Test Split） 函数：train_test_split使用场景：将数据分为训练集和测试集，避免模型过拟合。作用：确保模型在未见过的数据上验证性能。示例&…...

编程日记 2025/8/3 11:13:09

大模型量化框架GPTQModel的基本使用方法

接上一篇博客：AutoGPTQ报torch._C._LinAlgError: linalg.cholesky: The factorization could not be completed的解决办法-CSDN博客如果Llama factory量化一直报错，可以改用其他的量化框架，例如GPTQ：https://github.com/ModelCl…...

编程日记 2025/8/2 13:41:09

HTTP长连接与短连接的前世今生

HTTP长连接与短连接的前世今生大家好！作为一名在互联网摸爬滚打多年的开发者，今天想跟大家聊聊HTTP中的长连接和短连接这个话题。记得我刚入行时，对这些概念一头雾水，希望这篇文章能帮助新入行的朋友少走些弯路。什么是HTTP…...

编程日记 2025/8/3 11:13:12

线程控制学习

1、线程创建： int pthread_create(pthread_t *thread, const pthread_attr_t *attr, void * (*start_routine)(void*), void *arg); 参数 thread：返回线程ID；attr：设置线程的属性，attr为nullptr表示使用默认属性(一般…...

编程日记 2025/7/30 20:40:34

使用 Node.js 从零搭建 Kafka 生产消费系统

目录一、Kafka 核心概念速览二、环境准备三、生产者实现：发送消息四、消费者实现：处理消息五、高级配置与最佳实践六、常见问题解决七、应用场景示例总结 Apache Kafka 作为高吞吐、分布式的消息队列系统，在实时数据流处理中…...

编程日记 2025/8/2 18:43:10

【Linux系统】Linux权限讲解！！！超详细！！！

目录 Linux文件类型区分方法文件类型 Linux用户用户创建与删除用户之间的转换 su指令普通用户->超级用户(root) 超级用户(root) ->普通用户普通账户->普通账户普通用户的权限提高 sudo指令注： Linux权限定义权限操作 1、修改文…...

编程日记 2025/7/28 15:59:40

Ubuntu安装TensorFlow 2.13-GPU版全流程指南（anaconda)

目录一、安装前准备1.版本选择依据2.创建独立环境二、详细安装步骤1.通过conda自动安装依赖2.手动验证依赖版本三、补充说明1.组件依赖关系表2.常见问题解决方案3.性能验证脚本一、安装前准备 1.版本选择依据当前最新稳定版：TensorFlow 2.13&a…...

编程日记 2025/7/29 13:58:58

Spring事务管理

介绍了事务的概念，事务的特性，JDBC 事务管理的步骤和操作过程，以及Spring事务管理的两种实现方式：编程式事务管理和声明式事务管理。 1.事务的概念事务（Transaction）就是将一系列的数据库操作作为一个整体…...

编程日记 2025/7/31 14:39:54

避雷：C语言中 scanf() 函数的错误❌使用！！！

1. 返回值说明 scanf函数会返回成功匹配并赋值的输入项个数，而不是返回输入的数据。可以通过检查返回值数量来确认输入是否成功。若返回值与预期不符，就表明输入存在问题。 #include <stdio.h>int main() {int num;if (scanf("%d", …...

编程日记 2025/7/20 5:35:54

判断一个操作是不是允许

一、目的简单探索一个URL请求是不是允许的。二、具体过程 (一)系统的初始化系统数据库有账户"admin"，密码是"123"。账号"admin"的角色是管理员"manager"。假设管理员身份设定的权限是： 1、对于/user/开头的…...

编程日记 2025/7/30 12:04:22

【FPGA开发】Cordic原理推导、Xilinx PG105手册解读

目录 Cordic原理推导PG105手册解读IP核总览核心计算功能总览基本握手信号非阻塞模式 NonBlocking Mode阻塞模式 Block Mode 数据格式数据映射本文针对Cordic算法本身，以及Xilinx官方CORDIC IP做学习记录，如有纰漏，欢迎指正！ Cord…...

编程日记 2025/7/30 18:26:17

数据结构与算法：宽度优先遍历

前言进入图论部分难度明显提升了一大截，思路想不到一点…… 一、宽度优先遍历 1.内容宽度优先遍历主要用于在图上求最短路。 （1）特点宽度优先遍历的特点就是逐层扩展，最短路即层数 （2）使用条件 …...

编程日记 2025/7/29 1:15:49

PyTorch 面试题及参考答案（精选100道）

目录 PyTorch 的动态计算图与 TensorFlow 的静态计算图有何区别？动态图的优势是什么？解释张量（Tensor）与 NumPy 数组的异同，为何 PyTorch 选择张量作为核心数据结构？什么是 torch.autograd 模块？它在反向传播中的作用是什么？如何理解 PyTorch 中的 nn.Module 类？…...

编程日记 2025/7/30 17:37:23

【数理基础】【概率论与数理统计】概率论与数理统计本科课程总结、资料汇总、个人理解

1 前言概率论与数理统计是数学系核心的基础专业课，我本科的时候，是拆开上的，对应工科专业的高数中的概率论与数理统计，在量子力学，机器学习，计算机领域深度学习，大模型，机器人控制…...

编程日记 2025/8/3 1:36:58

美制 / 英制单位换算/公制/帝国制单位转换速查表

文章目录 💡Introduction📏 英制（美制）单位与公制换算速查表🧱 一、长度（Length）🧴 二、体积（Volume / Liquid Measure）⚖️ 三、质量 / 重量（Wei…...

编程日记 2025/7/31 7:47:44

ENSP学习day9

ACL访问控制列表实验 ACL（Access Control List，访问控制列表）是一种用于控制用户或系统对资源（如文件、文件夹、网络等）访问权限的机制。通过ACL，系统管理员可以定义哪些用户或系统可以访问特定资源&#x…...

编程日记 2025/7/30 19:29:07

我爱学算法之——滑动窗口攻克子数组和子串难题（中）

学习算法，继续加油！！！ 一、将 x 减到 0 的最小操作数题目解析来看这一道题，题目给定一个数组nums和一个整数x；我们可以在数组nums的左边或者右边进行操作（x减去该位置的值）&#…...

编程日记 2025/8/2 13:41:13

Linux centos 7 vsftp本地部署脚本

下面是脚本: #!/bin/bash #function:vsftpd脚本 #author: 20230323 IT 小旋风# 判断是否是root用户 if [ "$USER" ! "root" ]; thenecho "不是root 装个蛋啊"exit 1 fi# 关闭防火墙 systemctl stop firewalld && systemctl disable …...

编程日记 2025/8/3 11:19:53

编程考古-安德斯·海尔斯伯格（Anders Hejlsberg）回答离开Borland的原因

安德斯海尔斯伯格（Anders Hejlsberg）是著名的编程语言和工具开发者，曾主导开发了 Turbo Pascal、Delphi（Borland 时期），以及加入微软后参与的 C# 和 TypeScript。关于他离开 Borland 的原因，可以…...

编程日记 2025/8/2 16:33:08

数据库数值函数详解

各类资料学习下载合集 https://pan.quark.cn/s/8c91ccb5a474 数值函数是数据库中用于处理数值数据的函数，可以用于执行各种数学运算、统计计算等。数值函数在数据分析及处理时非常重要，能够帮助我们进行数据的聚合、计算和转换。在本篇博客中，我们将详细介绍常用的…...

编程日记 2025/7/31 1:39:55

SpringBoot与Redisson整合，用注解方式解决分布式锁的使用问题

文章引用：https://mp.weixin.qq.com/s/XgdKE2rBKL0-nFk2NJPuyg 一、单个服务 1.代码该接口的作用是累加一个值，访问一次该值加1 RestController public class LockController {Autowiredprivate StringRedisTemplate stringRedisTemplate;GetMappin…...

编程日记 2025/7/25 20:22:46

Bash 脚本基础

一、Bash 脚本基础什么是 Bash 脚本：Bash 脚本是一种文本文件，其中包含了一系列的命令，这些命令可以被 Bash shell 执行。它用于自动化重复性的任务，提高工作效率。 Bash 脚本的基本结构：以 #!/bin/bash 开头&#x…...

编程日记 2025/7/30 19:32:03

【Linux】线程库

一、线程库管理 tid其实是一个地址 void* start(void* args) {const char* name (const char *)args;while(true){printf("我是新线程 %s ，我的地址：0x%lx\n",name,pthread_self());sleep(1);}return nullptr; }int main() {pthread_t tid…...

编程日记 2025/8/2 20:31:10

Smith3.0 4.0的阻抗匹配操作方法

阅读了这篇文章中，我get到一些知识点的总结： 百度安全验证https://baijiahao.baidu.com/s?id1822624157494292625 1）红色圆代表阻抗圆，绿色圆代表导纳圆。 2）圆心位于50欧，最左侧为0欧，最右侧…...

编程日记 2025/7/30 13:09:20

装饰器模式 (Decorator Pattern)

装饰器模式 (Decorator Pattern) 是一种结构型设计模式，它动态地给一个对象添加一些额外的职责，就增加功能来说，装饰器模式相比生成子类更为灵活。一、基础 1 意图动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。 2 适用场景当…...

编程日记 2025/7/27 14:11:41

生活电子类常识——搭建openMauns工作流+搭建易犯错解析

前言小白一句话生成一个网站？小白一句话生成一个游戏？小白一句话生成一个ppt?小白一句话生成一个视频？ 可以原理总体的执行流程是 1，用户下达指令 2，大模型根据用户指令，分解指令任务为多个细分步骤…...

编程日记 2025/7/29 6:46:28

题型笔记 | Apriori算法

目录内容拓展知识内容其步骤如下： 扫描全部数据，产生候选项 1 1 1 项集的集合 C 1 C_1 C1根据最小支持度，由候选 1 1 1 项集的集合 C 1 C_1 C1 产生频繁 1 1 1 项集的集合 L 1 L_1 L1。若 k > 1 k > 1 k>1&#xf…...

编程日记 2025/7/30 12:04:58

雷电模拟器启动94%卡住不动解决方案

安卓模拟器启动失败/启动加载卡0-29%/启动卡50%/启动卡94%的解决方法首先看官方论坛常见问题来尝试解决： 安卓模拟器启动失败/启动加载卡0-29%/启动卡50%/启动卡94%的解决方法-雷电安卓模拟器-手游模拟器安卓版_android手机模拟器电脑版_雷电模拟器帮助中心所有…...

编程日记 2025/6/28 5:34:17

站群服务器是什么意思呢？

站群服务器是一种专门为托管和管理多个网站而设计的服务器，其核心特点是为每个网站分配独立的IP地址。这种服务器通常用于SEO优化、提高网站权重和排名，以及集中管理多个网站的需求。以下是站群服务器的详细解释： 一、站群服务器的定义站群…...

编程日记 2025/8/2 17:36:10

靶场（十五）---小白心得思路分析---LaVita

启程： 扫描端口，发现开放22，80端口，发现ws.css可能存在exp，经查发现无可利用的exp PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 8.4p1 Debian 5deb11u2 (protocol 2.0) | ssh-hostkey: | 3072 c9…...

编程日记 2025/8/3 1:27:04

第十六次CCF-CSP认证（含C++源码）

第十六次CCF-CSP认证小中大满分思路遇到的问题二十四点（表达式求值）难点满分思路小中大这次我觉得是非常难的只有一道easy 做的时候看这个通过率就有点不对劲上官网看了一眼平均分 106 就是人均A一道的水准一开始看了半天第三题几乎还是下不了手…...

编程日记 2025/8/1 9:44:48

大数据中的数据预处理：脏数据不清，算法徒劳！

大数据中的数据预处理：脏数据不清，算法徒劳！ 在大数据世界里，数据预处理是个让人又爱又恨的环节。爱它，是因为数据预处理做好了，后续的模型跑起来又快又准，仿佛给AI装上了火箭助推器&#xff1…...

编程日记 2025/7/30 21:24:32

17153 班级活动

17153 班级活动 ⭐️难度：简单 🌟考点：2023、思维、国赛 📖 📚 import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;public class Main {static int N 10…...

编程日记 2025/8/1 22:40:46

算力100问☞第93问：算力资源为何更分散了？

目录 1、政策驱动与地方投资的盲目性 2、美国芯片断供与国产替代的阵痛 3、政企市场对私有云的偏好 4、技术标准与供需结构的失衡 5、产业生态与市场机制的滞后 6、破局路径与未来展望在大模型和人工智能技术快速发展的背景下，算力资源已成为数字经济时代的核心基础设施…...

编程日记 2025/7/23 13:48:01

记录 macOS 上使用 Homebrew 安装的软件

Homebrew 是 macOS 上最受欢迎的软件包管理器之一，能够轻松安装各种命令行工具和 GUI 应用。本文记录了我通过 Homebrew 安装的各种软件，并对它们的用途和基本使用方法进行介绍。 🍺 Homebrew 介绍 Homebrew 是一个开源的包管理器&#xff…...

编程日记 2025/7/20 19:09:24

Java 安装开发环境(Mac Apple M1 Pro)

下载 Java Downloads 查看本地安装的 JDK 所在位置以及 JAVA 版本系统默认的安装处 /Library/Java/JavaVirtualMachines配置Java 添加环境变量 vim ～/.bash_profileAdd # 安装位置 export JAVA_11_HOME"/Library/Java/JavaVirtualMachines/zulu-11.jdk…...

编程日记 2025/7/31 15:11:17

微前端框架的实战demo

以下是基于主流微前端框架的实战 Demo 开发指南，综合多个开源项目与实践案例整理而成： 一、qiankun 框架实战 1. 核心架构主应用：负责路由分发、子应用注册与生命周期管理子应用：独立开发部署，支持不同技术栈&#…...

编程日记 2025/7/30 6:00:39

相关文章：