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

今天开始学习前端项目,遇到了一个Bug调了好久,即使margin为0,但还是有空格。

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

html 复制代码
<!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>

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

相关推荐
遗憾随她而去.29 分钟前
前端浏览器缓存深度解析:从原理到实战
前端
万行1 小时前
企业级前后端认证方式
前端·windows
2501_948120151 小时前
基于Vue 3的可视化大屏系统设计
前端·javascript·vue.js
Jinuss1 小时前
源码分析之React中createFiberRoot方法创建Fiber根节点
前端·javascript·react.js
Jinuss2 小时前
源码分析之React中ReactDOMRoot实现
前端·javascript·react.js
web守墓人2 小时前
【前端】vue3的指令
前端
想起你的日子3 小时前
EFCore之Code First
前端·.netcore
框架图3 小时前
Html语法
前端·html
深耕AI3 小时前
【wordpress系列教程】07 网站迁移与备份
运维·服务器·前端·数据库