小黑艰难的前端啃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>

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

相关推荐
郝学胜-神的一滴几秒前
一序平衡,括号归真:单括号匹配算法的优雅美学
java·前端·数据结构·c++·python·算法
wangruofeng4 分钟前
ripgrep 完全指南:比 grep 快 100 倍的命令行搜索利器
前端·devops
恋猫de小郭6 分钟前
Flutter 鸿蒙 2026 路线发布,加速同步官方生态,进一步优化体验
前端·flutter·harmonyos
. . . . .8 分钟前
CSS三大主流方案深度解析
前端·css·tensorflow
小码哥_常8 分钟前
Android开发告别findViewById!DataBinding从入门到实战,一篇吃透
前端
北寻北爱8 分钟前
面试题- html篇
前端
麦麦鸡腿堡9 分钟前
JavaWeb_HTML/CSS快速入门
前端·css·html
小碗细面14 分钟前
5 分钟上手 Google Stitch:AI 时代的 UI 设计新范式
前端·aigc·ai编程
LQE19 分钟前
深入理解 Vue 响应式系统:从 Vue 2 到 Vue 3 的演进之路
前端
美团技术团队20 分钟前
重塑站外体验:大众点评 M 站基于 Qwik.js 的重构实践
前端