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

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

相关推荐
猿究院_xyz25 分钟前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts
IT_陈寒36 分钟前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道的深度优化方案
前端·人工智能·后端
清水迎朝阳38 分钟前
监听 edge大声朗读 样式变化
前端·edge
油丶酸萝卜别吃1 小时前
修改chrome配置,关闭跨域校验
前端·chrome
m0_740043731 小时前
3、Vuex-Axios-Element UI
前端·javascript·vue.js
风止何安啊1 小时前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
JS_GGbond1 小时前
给数组装上超能力:JavaScript数组方法趣味指南
前端·javascript
前端无涯1 小时前
Tailwind CSS v4 开发 APP 内嵌 H5:安卓 WebView 样式丢失问题解决与降级实战
前端
小邋遢2.01 小时前
vscod 执行npm build报错:Error: Cannot find module ‘vite‘
前端·npm·node.js
是你的小橘呀1 小时前
新手入门 React 必备:电影榜单项目核心知识点全解析
前端·javascript