小黑艰难的前端啃bug之路:内联元素之间的间隙问题

今天开始学习前端项目,遇到了一个Bug调了好久,即使margin为0,但还是有空格。在这里插入图片描述

小黑整理,用四种方法解决了空白问题

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body ><div style="font-weight: bold; font-size:25px">原始状态:</div><div><a href="#" style="background-color: aqua;">小黑无敌酒量</a><a href="#" style="background-color: red;">老黑驴</a></div><div style="font-weight: bold; font-size:30px;margin-bottom: 20px;">三种方法:</div><div style="font-weight: bold; font-size:25px;">(1)通过设置父元素font-size,消灭空格:</div><div style="font-size: 0px;margin-bottom: 20px;margin-top: 10px;"><a href="#" style="background-color: aqua;font-size: 15px;">小黑无敌酒量</a><a href="#" style="background-color: red;font-size: 15px;">老黑驴</a></div><div style="font-weight: bold; font-size:25px;">(2)通过设置float属性:</div><div style="font-size: 0px;margin-top: 10px;"><a href="#" style="font-size:15px;float: left;background-color: aqua;">小黑无敌酒量</a><a href="#" style="font-size:15px;float: left;background-color: red;">老黑驴</a><div style="clear:both;margin-bottom: 20px;"></div></div><div style="font-weight: bold; font-size:25px;">(3)margin设置为负数:</div><div style="margin-bottom: 20px;margin-top: 10px;"><a href="#" style="font-size:15px;background-color: aqua;">小黑无敌酒量</a><a href="#" style="font-size:15px;background-color: red;margin-left: -5px;">老黑驴</a></div><div style="font-weight: bold; font-size:25px;">(4)word-spacing设置为负数:</div><div style="margin-bottom: 20px;margin-top: 10px;word-spacing: -5px;"><a href="#" style="font-size:15px;background-color: aqua;">小黑无敌酒量</a><a href="#" style="font-size:15px;background-color: red;">老黑驴</a></div></body>
</html>

在这里插入图片描述

下班,准备先弹琴再上瑜伽课,今天下午彩排成功,加油!!明天会更好

在这里插入图片描述

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

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

相关文章

应该如何选择轻量级低代码、重量级低代码、轻量级低代码+定制、纯定制软件开发?

引言 在当今数字化时代&#xff0c;软件开发成为推动业务创新和增强竞争力的关键因素。然而&#xff0c;在众多的软件开发方法中&#xff0c;如何选择适合自己项目的方法成为了一个至关重要的问题。本文将探讨轻量级低代码、重量级低代码、轻量级低代码定制、以及纯定制这四种…

[MQ]常用的mq产品图形管理web界面或客户端

一、MQ介绍 1.1 定义 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。 如果非要用一个定义来概括只能是抽象出来一些概念&#xff0c;概括为跨服务之间传递信息的软件。 1.2 MQ产品 较为成熟的MQ产品&#xff1a;IBMMQ&#xff08;IBM We…

目标检测 - RCNN系列模型

文章目录 1. RCNN2. Fast-RCNN3. Faster-RCNN 1. RCNN 论文&#xff1a;Rich feature hierarchies for accurate object detection and semantic segmentation 地址&#xff1a;https://arxiv.org/abs/1311.2524 分为两个阶段&#xff1a; 目标候选框Object ProposalsProposal…

算法------(10)堆

例题&#xff1a;&#xff08;1&#xff09;AcWing 838. 堆排序 我们可以利用一个一维数组来模拟堆。由于堆本质上是一个完全二叉树&#xff0c;他的每个父节点的权值都小于左右子节点&#xff0c;而每个父节点编号为n时&#xff0c;左节点编号为2*n&#xff0c;右节点编号为2*…

kubeSphere DevOps自定义容器 指定nodejs版本

✨✨✨✨✨✨ &#x1f380;前言&#x1f381;基于内置镜像构建&#x1f381;把镜像添加基础容器中&#x1f381;检查容器是否配置成功&#x1f381;不生效的原因排查&#x1f381;按步骤执行如下命令 &#x1f380;前言 由于我本地的开发环境node是16.18.1,而自带容器node的版…

VUE项目目录与运行流程(VScode)

各目录对应名称含义 main.js&#xff08;导入App.vue&#xff0c;基于App.vue创建结构渲染index.html&#xff09; //核心作用&#xff1a;导入App.vue&#xff0c;基于App.vue创建结构渲染index.html//1.导入Vue核心包 import Vue from vue//2.导入App.vue根组件 import App f…

MSB20M-ASEMI小功率家电专用MSB20M

编辑&#xff1a;ll MSB20M-ASEMI小功率家电专用MSB20M 型号&#xff1a;MSB20M 品牌&#xff1a;ASEMI 封装&#xff1a;UMSB-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;2A 功率(Pd)&#xff1a;50W 芯片个数&#xff1a;4 引…

20240122面试练习题10

1. Redis为什么执行这么快&#xff1f; 二、Redis为什么这么快&#xff1f; 1、完全基于内存&#xff0c;数据存在内存中&#xff0c;绝大部分请求是纯粹的内存操作&#xff0c;非常快速&#xff0c;跟传统的磁盘文件数据存储相比&#xff0c;避免了通过磁盘IO读取到内存这部分…

微软 AD |域控制器 | 组件 | 域服务 | 对象解析

介绍 Active Directory&#xff08;AD&#xff09;&#xff0c;是微软的目录服务&#xff0c;提供强大的功能和管理体系&#xff0c;用于组织管理和安全存储网络上的资源和用户、计算机、服务对象等信息。 AD 功能&#xff1a; 身份验证和访问控制&#xff1a; 提供集中式的身…

Kubernets Deployment详解

因为Pod生命周期是短暂的&#xff0c;一旦运行完成则立即回收&#xff0c;且涉及Pod的创建、自愈、删除等操作比较复杂&#xff0c;所以很少在Kubernetes中直接使用Pod。而是使用更高级的称为Controller&#xff08;控制器&#xff09;的抽象层&#xff0c;来完成对Pod的创建、…

为什么时序逻辑电路会落后一拍?

1、时序逻辑电路落后一拍&#xff1f; FPGA初学者可能经常听到一句话&#xff1a;“时序逻辑电路&#xff0c;或者说用 < 输出的电路会延迟&#xff08;落后&#xff09;一个时钟周期。”但在仿真过程中经常会发现不符合这一“定律”的现象–明明是在仿真时序逻辑&#xff…

工业4.0开放平台通信 统一架构OPC UA的一种测试方法

工业4.0和工业物联网&#xff08;Industrial Internet of Things, IIoT&#xff09;的核心挑战在于设备、机器以及来自不同行业服务之间的安全和标准化的数据和信息交换。 2016年11月工业4.0平台发布了指导纲要《工业4.0产品需要实现哪些准则》&#xff0c;即对于所有位于工业…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-Tag标签管理实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

1174:长整数排序(指针专题)

题目描述 长整数排序。输入n 然后输入n个位数不超过100位的大整数&#xff0c;输入的整数可能含有前导0。将这n个长整数排序后输出&#xff0c;输出不含前导0。int greater(char *s1, char *s2){若s1指向的整数大于s2指向的整数&#xff0c;返回一个正整数;若s1指向的整数小于s…

看门狗定时器

1. 看门狗 看门狗: 用于设备在 程序异常(死机) 时 可以自动重启设备 实现原理: 通过定时器 进行定时 , 在定时器时间结束前 进行 "喂狗" 重置定时器时间 若时间到,还没有"喂狗",系统重启 本质就是一个定时器, 如何定时? 定时器 本质是对 晶振时钟进行 计…

Leetcode—144. 二叉树的前序遍历【简单】

2023每日刷题&#xff08;九十六&#xff09; Leetcode—144. 二叉树的前序遍历 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr…

物业app开发成功案例:如何满足用户需求

在当今数字化时代&#xff0c;物业管理已经不再是一个简单的领域。随着智能手机的普及和移动互联技术的发展&#xff0c;许多物业管理公司纷纷投入物业App开发&#xff0c;以提升管理效率、改善用户体验。本文将介绍一个成功的案例&#xff0c;探讨如何满足用户需求。 物业App…

vue —— h函数的学习与使用

文章目录 一、h函数是什么&#xff1f;二、h函数格式说明及使用示例1&#xff1a;简单创建一个VNode&#xff08;vue3&#xff09;示例2&#xff1a;vue2中h函数用法示例3&#xff1a;vue3中h函数的用法vue2和vue3中h函数的区别&#xff1f; 三、h函数实现原理四、h函数常用场景…

800G光传输网络中的相干调制与PAM4技术

在800G光传输网络架构中&#xff0c;相干调制技术和PAM4&#xff08;四电平脉冲幅度调制&#xff09;技术各具优势&#xff0c;分别针对不同应用场景提供高效解决方案。 相干调制是高级光通信的核心技术之一&#xff0c;它通过精密操控光载波的频率、相位和振幅来编码信息&…

HMI-Board以太网数据监视器(二)MQTT和LVGL

E ∫ d E ∫ k d q r 2 k L ∫ d q r 2 E \int dE \int \frac{kdq}{r^2} \frac{k}{L} \int \frac{dq}{r^2} E∫dE∫r2kdq​Lk​∫r2dq​ E Q 2 π ϵ L 2 E \frac{Q}{2\pi\epsilon L^2} E2πϵL2Q​ Γ ( n ) ( n − 1 ) ! ∀ n ∈ N \Gamma(n) (n-1)!\quad\forall n…