版权声明：本文为博主原创文章，码字不易，转载请先经本人同意。 https://blog.csdn.net/promiseCao/article/details/52675738
我们平时在写行内元素时，经常会不小心换行写个空格啥的，然后就会惊奇的发现浏览器中居然有空格。
<span>第一个span标签</span>
<span>第二个span标签</span>效果是这样的：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span {
padding:0px;
margin:0px;
background:#0f0;
}
</style>
</head>
<body>
<span>第一个span</span><span>这是第二个span</span>
<hr />
<em>第一个em标签haha</em> <span>第二个span</span>
<hr />
<em>第一个em标签</em> <em>第二个em</em>
<hr>
<span>第一个span标签</span>
<span>第二个span标签</span>
<br /><br />
<a>第一个a标签</a><a>这是第二个a标签</a>
<hr />
<a>第一个a标签haha</a> <a>第二个标签</a>
<hr />
<label>第一个label标签</label> <label>第二个label</label>
<hr>
<label>第一个label标签</label>
<strong>第二个strong标签</strong>
</body>
</html>
效果是这样的：
由此我们可以得出这样的结论：只要是在两个行内元素之间添加空格，或者换行在浏览器中的表现都会是一个空格的距离。
这个空格的距离具体是多大呢？它是当前字体大小的一半。
空格宽度 = 当前字体大小/2
例如默认字体大小是16px,那么空格的宽度就是8px。有兴趣的朋友可以去测量一下，但是这里要注意一个问题——测量的时候别忘了算上中文后面的1px（甚至是几px）的空白。关于这个问题我又在前一篇文章中详细介绍，请移步下面链接↓
所有博客已转移至个人博客地址：www.clramw.top