HTML: 元素间默认存在间距的问题

1. 问题描述

---

我们先来看一段代码

* {
   
	padding: 0;
	margin: 0;
}
.mySpan1 {
   
	background-color: red;
}
.mySpan2 {
   
	background-color: green;
}

<div>
	<span class="mySpan1">我是span1</span>
	<span class="mySpan2">我是span2</span>
</div>

运行效果如下图所示

可以看到，在清除了默认的 margin 和 padding 后，两个 span 元素之间依然产生了间距。

2. 产生原因

---

这个间距是在源代码中换行导致的，即源码中两个 span 元素换行形成的。

源代码内换行产生的换行符，会被浏览器解析为一个空格，在渲染的时候，会产生一个缝隙。实际上我们并不需要它。

3. 解决方法

---

(1) 源代码内同行显示的标签不换行(不推荐)

既然间距是因为换行引起的，那么，我们在书写源代码时，只要是同行显示的标签我们都不换行，就可以解决这个问题：