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

css基础(27)_行内、行内块元素之间的空白问题

news 来源：原创 2025/7/26 8:29:55

行内、行内块元素之间的空白问题

产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

案例一：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素之间的空白问题</title>
</head>
<style>div{height: 500px;font-size: 20px;}.box1{background-color: aquamarine;}.box2{background-color:blueviolet;}.box3{background-color:burlywood;}
</style>
<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>  
</body>
</html>

解决方案：
方案一：去掉换行和空格。

<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>  
</body>

方案二：给父元素设置font-size：0，在给需要显示文字的元素，单独设置字体大小。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素之间的空白问题</title>
</head>
<style>div{height: 500px;font-size: 0px;}.box1{font-size: 20px;background-color: aquamarine;}.box2{font-size: 20px;background-color:blueviolet;}.box3{font-size: 20px;background-color:burlywood;}
</style>
<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>  
</body>
</html>

行内块的幽灵空白问题

产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的。

案例二：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素、行内块元素之间的空白问题</title><style>div{background-color: cadetblue;}</style>
</head>
<body><div><img src="../news_picture/no_picture1.png" alt="">xxxg</div>
</body>
</html>

解决方案：
方案一：给行内块设置vertical，值不为baseline即可，设置为middle、bottom、top均可。

        div {background-color: cadetblue;}img {vertical-align: bottom;}

方案二：若父元素中只有一张图片(不含其他文字、字母等)，设置图片为display:block。

        div{background-color: cadetblue;}img{display: block;}

css基础(27)_行内、行内块元素之间的空白问题

行内、行内块元素之间的空白问题产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。案例一： <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8">&…...

编程日记 2025/7/26 8:29:55

如果接口返回值图片有很长一串码，需要添加前缀

需要在前面添加前缀：data:image/jpeg;base64,然后将值赋值给<img :src"originalImage" /> this.tableLists.map((item)>{item.originalImage "data:image/jpeg;base64,"item.originalImage})以上方法会导致出现一个小bug，…...

编程日记 2025/7/26 8:29:54

《AI大模型开发笔记》——ollama应用全面解析

入门篇 1 ollama是什么？ Ollama 是一个支持在本地运行大语言模型的工具，兼容 Windows、Linux 和 MacOS 操作系统。使用 Ollama，您仅需一行命令即可启动模型。 2 如何安装？ Windows和MacOS用户，从下面链接下载安装即可：下载地址：https://ollama.com/download Linux系…...

编程日记 2025/7/26 7:03:42

Paddle Inference部署推理（三）

三：Paddle Inference推理导出模型 Paddle Inference支持使用飞桨静态图模型进行推理，您可以通过以下两种方式获取静态图模型： （1）飞桨框架导出推理模型飞桨框架在训练模型过程中，会在本地存储最终训练…...

编程日记 2025/7/25 10:09:20

CSP/信奥赛C++语法基础刷题训练（23）：洛谷P1217：[USACO1.5] 回文质数 Prime Palindromes

CSP/信奥赛C语法基础刷题训练（23）：洛谷P1217：[USACO1.5] 回文质数 Prime Palindromes 题目描述因为 151 151 151 既是一个质数又是一个回文数（从左到右和从右到左是看一样的），所以 151 151 …...

编程日记 2025/7/26 5:36:16

《跨越语言壁垒：Python 人工智能原型到 C++可执行程序的转型之路》

在人工智能的广阔天地里，Python 以其简洁易用和丰富的库资源成为众多开发者快速搭建人工智能原型的首选语言。然而，在一些对性能和资源控制要求极高的场景下，C则展现出无可比拟的优势。那么，如何将 Python 中开发的人工智能原型代…...

编程日记 2025/7/26 2:58:52

flowable流程图详细绘制教程

文章目录前言一、flowable是什么？回答下之前的问题二、flowable-modeler使用1. 使用步骤2.开始绘制弄一个请假的流程三加载该流程总结前言 flowable有些晦涩难懂的东西： 我最开始接触的时候,还是用的activity,当时觉得好复杂,那么这次经过我自己在…...

编程日记 2025/7/25 1:21:23

Figma入门-基本操作制作登录页

Figma入门-基本操作制作登录页前言在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的&am…...

编程日记 2025/7/26 8:29:15

在windows操作系统上，用git与github账户连接

一、环境准备 1.1 git软件 1.2 github账号 1.3 创建一个项目目录，比如 D:\project\gitproject 二、开始操作 1. 进入项目目录下，右键，如图，打开git bash命令行 2. 在命令行输入以下三个命令 $ git config --global user.name &quo…...

编程日记 2025/7/23 14:46:22

springboot系列--拦截器执行原理

一、拦截器核心概念一、定义拦截器（Interceptor）是框架级别的组件，用于在请求的不同阶段（如到达控制器之前（也就是接口）、处理完成之后）动态地拦截和处理 HTTP 请求。二、使用场景一、用户…...

编程日记 2025/7/25 23:44:45

数据可视化复习2-绘制折线图+条形图（叠加条形图，并列条形图，水平条形图）+ 饼状图 + 直方图

目录目录一、绘制折线图 1.使用pyplot 2.使用numpy 编辑 3.使用DataFrame 编辑二、绘制条形图（柱状图） 1.简单条形图 2.绘制叠加条形图 3.绘制并列条形图 4.水平条形图编辑三、绘制饼状图四、绘制散点图和直方图 1.散点图 2…...

编程日记 2025/7/19 17:31:20

STM32F10x 定时器

使用定时器实现：B5 E5的开关添加相关的.h路径文件添加相关的.c配置文件 led.h文件用于声明LED函数 #ifndef __LED_H //没有定义__LED_H #define __LED_H //就定义__LED_H #define LED1_ON GPIO_ResetBits(GPIOB,GPIO_Pin_5) #defi…...

编程日记 2025/7/22 2:11:24

VBA技术资料MF230：展开所有折叠视图并恢复

我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套，分为初级、中级、高级三大部分，教程是对VBA的系统讲解&#…...

编程日记 2025/7/26 8:07:40

【数据结构OJ】【图论】图综合练习--拓扑排序

题目描述已知有向图，顶点从0开始编号，求它的求拓扑有序序列。拓扑排序算法：给出有向图邻接矩阵 1.逐列扫描矩阵，找出入度为0且编号最小的顶点v 2.输出v，并标识v已访问 3.把矩阵第v行全清0 重复上述步骤&#xff0…...

编程日记 2025/7/26 8:16:42

网络安全防范

网络安全防范技术所属课程网络攻防实践作业要求第六次作业实践内容学习总结 PDR，$$P^2$$DR安全模型。防火墙（Firewall）： 网络访问控制机制，布置在网际间通信的唯一通道上。不足：无法防护内部威胁&…...

编程日记 2025/7/26 8:28:28

Linux nc 命令详解

简介 nc 全称 netcat，是一个在 Linux 中多功能的网络工具，通常用于通过 TCP 或 UDP 读取和写入网络连接，也能作为客户端或服务端用来 debug，测试，网络问题分析。常用示例检查端口是否是打开的 nc -zv <hostna…...

编程日记 2025/7/24 5:12:28

解决 Gradle 报错：`Plugin with id ‘maven‘ not found` 在 SDK 开发中的问题

在 SDK 开发过程中，使用 Gradle 构建和发布 SDK 是常见的任务。在将 SDK 发布为 AAR 或 JAR 包时，你可能会使用 apply plugin: maven 来发布到本地或远程的 Maven 仓库。但是，随着 Gradle 版本的更新，特别是从 Gradle 7 版本开始&…...

编程日记 2025/7/20 20:13:59

stm32cubemx+VSCODE+GCC+makefile 开发环境搭建

title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录内容往期内容导航第一步准备环境vscode 插件插件配置点灯内容往期内容导航第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…...

编程日记 2025/7/26 8:18:29

postgresql|数据库开发|python的psycopg2库按指定顺序批量执行SQL文件(可离线化部署)

一、 psycopg2简介 psycopg2库是python的一个可直接操作postgresql数据库的类库，是一个用于Python编程语言的PostgreSQL数据库适配器。它允许开发人员使用Python语言与PostgreSQL数据库进行交互和操作，不同于java，需要专用的一个驱动&#…...

编程日记 2025/7/22 11:43:38

学习ASP.NET Core的身份认证（基于Cookie的身份认证3）

用户通过验证后调用HttpContext.SignInAsync函数将用户的身份信息保存在认证Cookie中,以便后续的请求可以验证用户的身份,该函数原型如下所示，其中properties参数的主要属性已在前篇文章中学习，本文学习scheme和principal的意义及用法。 public static …...

编程日记 2025/7/26 6:32:53

Java 中的 HashMap 原理详解：底层结构与实现机制

HashMap 是 Java 中最常用的数据结构之一，它以其高效的存取速度在众多应用场景中被广泛使用。理解 HashMap 的底层实现原理，对提升开发效率、优化性能以及编写高效的代码都至关重要。本文将深入探讨 HashMap 的数据结构、存储机制、解决冲突的策略、扩容…...

编程日记 2025/7/20 23:17:59

数据库MYSQL——表的设计

文章目录前言三大范式：几种实体间的关系：一对一关系：一对多关系：多对多关系： 前言之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作， 是在已经创建数据库，表之上的操作。在实…...

编程日记 2025/7/23 22:11:06

CUDA补充笔记

文章目录一、不同核函数前缀二、指定kernel要执行的线程数量三、线程需要两个内置坐标变量来唯一标识线程四、不是blocksize越大越好，上限一般是1024个blocksize 一、不同核函数前缀二、指定kernel要执行的线程数量总共需要线程数是： 1 * N N个线程…...

编程日记 2025/7/24 9:36:17

OSI七层模型和TCP/IP五层模型详细介绍

这里写目录标题一.OSI含义二.OSI七层模型1.应用层2.表示层3.会话层4.传输层5.网络层6.数据链路层7.物理层 TCP/IP五层协议1.应用层2.运输层运行在TCP上的协议运行在UDP上的协议 3.网络层IP协议配套使用的协议 4.数据链路层四.网络协议分层的好处一.OSI含义 OSI即是开放式通…...

编程日记 2025/7/25 17:36:28

mac安装Pytest、Allure、brew

安装环境安装pytest 命令 pip3 install pytest 安装allure 命令：brew install allure 好吧那我们在安装allure之前我们先安装brew 安装brew 去了官网复制了命令还是无法下载如果你们也和我一样可以用这个方法哦使用国内的代码仓库来执行brew的安装脚本…...

编程日记 2025/7/19 20:34:42

Linux/Windows/OSX 上面应用程序重新启动运行。

1、Linux/OSX 上面重新运行程序，直接使用 execvp 函数就可以了，把main 函数传递来的 argv 二维数组（命令行参数）传进去就可以，注意不要在 fork 出来的子进程搞。 2、Windows 平台可以通过 CreateProcess 函数来创建新的…...

编程日记 2025/7/26 5:00:33

自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例

Kafka：分布式消息系统的核心原理与安装部署-CSDN博客自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析：从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…...

编程日记 2025/7/24 14:57:55

Odoo ：免费且开源的农牧行业ERP管理系统

文 / 开源智造Odoo亚太金牌服务引言提供农牧企业数字化、智能化、无人化产品服务及全产业链高度协同的一体化解决方案，提升企业智慧种养、成本领先、产业互联的核心竞争力。行业典型痛点一、成本管理粗放，效率低、管控弱产品研发过程缺少体系化…...

编程日记 2025/7/23 8:19:16

AI的自我陷阱：大型神经网络训练中的模型崩溃现象

10月7日，发布在arxiv上的一篇名为Strong Model Collapse的论文，由Meta 、纽约大学和加州大学洛杉矶分校的研究人员共同发表的研究表明在训练大型神经网络（如 ChatGPT 和 Llama）时，由于训练语料库中包含合成数据而导致的…...

编程日记 2025/7/26 5:00:21

Python（下载安装）

简介开发工具：pycharm, VS Code 1. 下载（解释器程序） Download Python | Python.org 2. 安装（解释器程序） 双击下载后的exe文件查看版本：python（并可以执行python代码） 3. 下载…...

编程日记 2025/7/21 5:42:34

记录一种在内核空间向用户空间通知中断的方法

记录一种在内核空间向用户空间通知中断的方法 0.前言1.代码实现1)内核设备驱动实现2)消息通知实现3)测试程序 2.解析参考文章：Linux驱动实践：中断处理函数如何【发送信号】给应用层？ 0.前言最近在项目中遇到一个需求，需要将一个…...

编程日记 2025/6/27 20:38:31

Apache Maven 标准文件目录布局

Apache Maven 采用了一套标准的目录布局来组织项目文件。这种布局提供了一种结构化和一致的方式来管理项目资源，使得开发者更容易导航和维护项目。理解和使用标准目录布局对于有效的Maven项目管理至关重要。本文将探讨Maven标准目录布局的关键组成部分，并…...

编程日记 2025/7/26 1:23:36

【vim】使用 gn 组合命令实现搜索选中功能

gn是Vim 7.4新增的一个操作（motion），作用是跳到并选中下一个搜索匹配项。具体说，Vim里执行搜索后，执行n操作只会跳转到下一个匹配项，而不选中它。但是我们往往需要对匹配项执行一些修改操作，例…...

编程日记 2025/7/24 1:04:56

解决登录Google账号遇到手机上Google账号无法验证的问题

文章目录场景小插曲解决方案总结场景 Google账号在新的设备上登录的时候，会要求在手机的Google上进行确认验证，而如果没有安装Google play就可能出现像我一样没有任何弹框，无法实现验证小插曲去年，我在笔记本上登录了Googl…...

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

基于YOLOv10深度学习的公共安全持刀行为检测系统研究与实现(PyQt5界面+数据集+训练代码)

随着社会的不断进步和城市化进程的加快，人口密度的增加和社会结构的复杂化使得公共安全问题日益凸显。近年来，各类公共安全事件频发，其中持刀行为作为一种典型的暴力行为，已成为威胁公共安全的严重因素之一。这种行为在公共场所发…...

编程日记 2025/7/24 4:33:44

HP6心率血压传感器

目录一、介绍 1、工作原理概述 2、具体实现步骤二、HP6的通信及配置 1、通信接口 2、器件地址/命令 3、校验三、程序设计 ①IIC通信相关基础函数 ②HP6相关基础函数一、介绍 HP6心率血压传感器的原理主要基于光电容积脉搏波描记法（PPG）&…...

编程日记 2025/7/16 11:13:49

深入理解 JVM 中的 G1 垃圾收集器原理、算法、过程和参数配置

引言 Java 虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称 GC）是自动内存管理的核心部分。G1（Garbage-First）垃圾收集器是 Oracle 在 JDK 7u4 版本中引入的一种新型垃圾收集器，…...

编程日记 2025/7/23 1:40:17

细说敏捷：敏捷四会之standup meeting

上一篇文章中，我们讨论了敏捷四会中冲刺计划会的实施要点，本篇我们继续分享敏捷四会中实施最频繁，团队最容易实施但往往也最容易走形的第二个会议：每日站会关于每日站会的误区站会是一个比较有标志性的仪式活动&#xff0…...

编程日记 2025/7/23 6:30:07

MySQL系列之身份鉴别（安全）

导览前言Q：如何保障MySQL数据库身份鉴别的有效性一、有效性检查1. 用户唯一2. 启用密码验证3. 是否存在空口令用户4. 是否启用口令复杂度校验5. 是否设置口令的有效期6. 是否限制登录失败尝试次数7. 是否设置（超过尝试次数）锁定的最小时长8.…...

编程日记 2025/7/22 8:33:23

vue3封装Element Plus table表格组件

支持绝大部分Element Plus原有设置属性，支持分页，支持动态适配高度效果展示组件代码： <template><div class"table-wrap" ref"tableWrap"><el-tableclass"w100 h100":data"tableInfo.…...

编程日记 2025/7/25 9:37:34

SFP+光模块介绍

SFP光模块介绍 1 SFP光模块简介(Small Form -Factor Pluggable)2 光模块管脚定义 1 SFP光模块简介(Small Form -Factor Pluggable) 光模块（Optical Module）由光电子器件、功能电路和光接口等组成，光电子器件包括激光发射器(Laser Transmitte…...

编程日记 2025/7/26 1:49:13

神经网络的初始化

目录为什么需要初始化？ 初始化的常用方法： 是否必须初始化？ 初始化神经网络中的权重和偏置是深度学习模型训练中非常重要的一步，虽然在某些情况下不进行初始化也能训练出模型，但正确的初始化方法能够显著提高训练效…...

编程日记 2025/7/13 17:14:10

数据集搜集器0.01

我们使用Python的Tkinter库来创建GUI界面，并使用requests库来从360百科获取数据。下面是一个完整的示例代码，它包括了一个简单的GUI界面，用户可以输入问题，点击按钮后会从360百科获取相关信息，并显示在同一个Text组件中…...

编程日记 2025/7/18 1:08:00

【Lucene】搜索引擎和文档相关性评分 BM25 算法的工作原理

BM25 算法的工作原理： 什么是 BM25 算法？ BM25 是一种流行的文本检索算法，广泛用于搜索引擎和文档相关性评分。它基于概率检索模型，旨在评估查询和文档之间的相关性。核心公式 BM25 的公式如下： score ( D , Q ) …...

编程日记 2025/7/21 11:40:47

嵌入式Linux——文件类型

目录普通文件目录文件目录文件的权限与管理字符设备文件和块设备文件符号链接文件查看符号链接删除符号链接修改符号链接管道文件匿名管道（Anonymous Pipe） 匿名管道的特点： 使用示例： 命名管道&#xff08…...

编程日记 2025/7/25 16:53:57

ES6 模块化语法

目录 ES6 模块化语法分别暴露统一暴露编辑默认暴露 ES6 模块化引入方式 ES6 模块化语法模块功能主要由两个命令构成：export 和 import。 ⚫ export 命令用于规定模块的对外接口（哪些数据需要暴露，就在数据前面加上关键字即可…...

编程日记 2025/7/23 9:23:08

Gradio学习笔记记录

安装指令：pip install gradio方法介绍 Interface》用于构建一些简单的页面，可以直接用这个指令搞定形式》接收三个参数分别为处理函数、输入、输出三部分，呈现一般左/上为输入，右或下为输出 fn：将用户界面 &#xff0…...

编程日记 2025/7/23 11:40:54

Node.js的下载与安装(支持各种新旧版本）

目录 1、node官网 2、node软件下载 3、软件安装（完整版） 1、node官网 Node.js — Download Node.jshttps://nodejs.org/en/download/package-manager 2、node软件下载按照下图进行选择node版本（真心推荐16/18，而是尽量是LTS…...

编程日记 2025/7/3 2:57:45

数据库和缓存的数据一致性 -20241124

问题描述一致性缓存中有数据，缓存的数据值数据库中的值缓存中本没有数据，数据库中的值最新值（有请求查询数据库时，会将数据写入缓存，则变为上面的“一致”状态） “数据不一致”： 缓存的数据值…...

编程日记 2025/7/24 23:08:15

【计算机网络】多路转接之select

系统提供select()来实现多路转接 IO 等拷贝 -> select()只负责等待，可以一次等待多个fd select()本身没有数据拷贝的能力，拷贝要read()/write()来完成一、select的使用 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exc…...

编程日记 2025/7/15 21:23:13

行内、行内块元素之间的空白问题

行内块的幽灵空白问题

相关文章：