小黑艰难的前端啃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.rhkb.cn/news/246174.html

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

相关文章

HTML 曲线图表特效

下面是代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style> body {background: #000524; }#wrapper {padding-top: 20px;background: #000524;b…

仅使用 Python 创建的 Web 应用程序(前端版本)第07章_商品列表

在本章中,我们将实现一个产品列表页面。 完成后的图像如下 创建过程与User相同,流程如下。 No分类内容1Model创建继承BaseDataModel的数据类Item2MockDB创建产品表并生成/添加虚拟数据3Service创建一个 ItemAPIClient4Page定义PageId并创建继承自BasePage的页面类5Applicati…

Android Studio离线开发环境搭建

Android Studio离线开发环境搭建 1.下载离线和解压包2.创建工程3.创建虚拟机tips 1.下载离线和解压包 下载地址 百度网盘&#xff1a;https://pan.baidu.com/s/1XBPESFOB79EMBqOhFTX7eQ?pwdx2ek 天翼网盘&#xff1a;https://cloud.189.cn/web/share?code6BJZf2uUFJ3a&#…

单片机开发板-硬件设计

开发板设计 1> 概述2> 功能2.1> GPIO类2.2> 通信类2.3> 显示类 3> 测试 1> 概述 开发板的定位&#xff1a;学会单片机&#xff1b; 目的越单纯&#xff0c;做的东西越好玩&#xff1b; 51开发板&#xff1a;DAYi STM32F103开发板&#xff1a;DAEr STM32F…

LVS 概念介绍

1、集群简介 集群概述 集群称呼来自于英文单词 cluster&#xff0c;表示一群、一串的意思&#xff0c;用在服务器领域则表示大量服务器的集合体&#xff0c;协同起来向用户提供系统资源&#xff0c;系统服务。通过网络连接组合成一个计算机组&#xff0c;来共同完一个任务。 …

GitHub 开启 2FA 双重身份验证的方法

为什么要开启 2FA 自2023年3月13日起,我们登录 GitHub 都会看到一个要求 Enable 2FA 的重要提示,具体如下: GitHub users are now required to enable two-factor authentication as an additional security measure. Your activity on GitHub includes you in this requi…

【C++】模板进阶

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.非类型模板参数 …

华为ensp--NAT实验

实验拓扑图及实验要求 实验相关配置 为保证可以登录防火墙web界面&#xff0c;需要对FW1、FW2以及Cloud1进行相关配置 Cloud1配置 需绑定网卡&#xff08;建议新建虚拟网卡&#xff09;&#xff0c;并且与防火墙管理口&#xff08;默认g0/0/0&#xff09;属于同一网段 FW1 F…

自动驾驶的决策层逻辑

作者 / 阿宝 编辑 / 阿宝 出品 / 阿宝1990 自动驾驶意味着决策责任方的转移 我国2020至2025年将会是向高级自动驾驶跨越的关键5年。自动驾驶等级提高意味着对驾驶员参与度的需求降低&#xff0c;以L3级别为界&#xff0c;低级别自动驾驶环境监测主体和决策责任方仍保留于驾驶…

【思路合集】talking head generation+stable diffusion

1 以DiffusionVideoEditing为baseline&#xff1a; 改进方向 针对于自回归训练方式可能导致的漂移问题&#xff1a; 训练时&#xff0c;在前一帧上引入小量的面部扭曲&#xff0c;模拟在生成过程中自然发生的扭曲。促使模型查看身份帧以进行修正。在像VoxCeleb或LRS这样的具…

ubuntu1604安装及问题解决

虚拟机安装vmbox7 虚拟机操作&#xff1a; 安装增强功能 sudo mkdir /mnt/share sudo mount -t vboxsf sharefolder /mnt/share第一次使用sudo提示is not in the sudoers file. This incident will be reported 你的root需要设置好密码 sudo passwd root 输入如下指令&#x…

机器学习整理

绪论 什么是机器学习&#xff1f; 机器学习研究能够从经验中自动提升自身性能的计算机算法。 机器学习经历了哪几个阶段&#xff1f; 推理期&#xff1a;赋予机器逻辑推理能力 知识期&#xff1a;使机器拥有知识 学习期&#xff1a;让机器自己学习 什么是有监督学习和无监…

【Java面试】Mysql

目录 sql的执行顺序索引的优点和缺点怎么避免索引失效(也属于sql优化的一种)一条sql查询非常慢&#xff0c;我们怎么去排查和优化&#xff1f;存储引擎 MylSAM和InnoDB、Memory的区别事务的四大特性(ACID)脏读、不可重复读、幻读事务的隔离级别&#xff1f;怎么优化数据库SQL优…

多个SSH-Key下,配置Github SSH-Key

首先&#xff0c;检查 github 的连接性&#xff0c;因为DNS污染的原因&#xff0c;很多机器ping不通github&#xff0c;就像博主的机器&#xff1a; 怎么解决DNS污染的问题&#xff0c;博主查了很多教程&#xff0c;测试出一个有效的方法&#xff0c;那就是修改hosts文件。host…

DAY11_(简易版)VUEElement综合案例

目录 1 VUE1.1 概述1.1.1 Vue js文件下载 1.2 快速入门1.3 Vue 指令1.3.1 v-bind & v-model 指令1.3.2 v-on 指令1.3.3 条件判断指令1.3.4 v-for 指令 1.4 生命周期1.5 案例1.5.1 需求1.5.2 查询所有功能1.5.3 添加功能 2 Element2.0 element-ui js和css和字体图标下载2.1 …

go语言(十九)---- channel

channel的使用 //1. 发送value到channelchannel <- value //2. 接收并将其丢弃<- channel //3. 从channel中接收数据&#xff0c;并将其赋值给x x : <- channel 例子 package mainimport "fmt"func main() {//定义一个channelc : make(chan int)go func…

山海鲸智慧医疗解决方案:让医疗数据说话

在医疗领域&#xff0c;数据可视化对于提高诊疗效率、辅助医学研究和提升患者就医体验具有重要意义。作为山海鲸可视化软件的开发者&#xff0c;我们致力于利用先进的数据可视化技术&#xff0c;为医疗行业提供高效、智能的解决方案&#xff0c;本篇文章就带大家一起了解一下这…

【Python】01快速上手爬虫案例一:搞定豆瓣读书

文章目录 前言一、VSCodePython环境搭建二、爬虫案例一1、爬取第一页数据2、爬取所有页数据3、格式化html数据4、导出excel文件 前言 实战是最好的老师&#xff0c;直接案例操作&#xff0c;快速上手。 案例一&#xff0c;爬取数据&#xff0c;最终效果图&#xff1a; 一、VS…

用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境 JavaScript 的历史 JavaScript 最初被称为 LiveScript&#xff0c;由 Netscape&#xff08;Netscape Communications Corporation&#xff0c;网景通信公司&#xff09;公司的布兰登艾奇&#xff08;Brendan Eich&#xff09;在 …

SpringBoot 自定义Filter 提前返回 CORS 错误 处理前后端分离跨域配置无效问题解析

前言 浏览器有跨域限制&#xff0c;非同源策略 (协议、主机名或端口不同) 被视为跨域请求&#xff0c;解决跨域有跨域资源共享(CORS)、反向代理和 JSONP的方式。本篇通过 SpringBoot 的资源共享配置 (CORS) 来解决前后端分离项目的跨域&#xff0c;以及从原理上去解决跨域配置…