行内元素间距问题

问题描述：

经常遇到给display:inline-block的元素设置间距3px;
实际情况其间距一定大于3px(加float情况除外)

---

元素解释特点：

在标准文档流里面，块级元素具有以下特点：

1. 总是在新行上开始，占据一整行；
2. 高度，行高以及外边距和内边距都可控制；
3. 宽度始终是与浏览器宽度一样，与内容无关；
4. 它可以容纳内联元素和其他块元素。

行内元素的特点：

1. 和其他元素都在一行上；
2. 高，行高及外边距和内边距部分可改变；
3. 宽度只与内容有关；
4. 行内元素只能容纳文本或者其他行内元素。不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变， 内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界， 但是内边界在ie6中不对上下起作用，只能对左右起作用

---

图示：

如图：
红色、蓝色的细outline为元素边界展示；在不写margin的情况下，实际的行内元素的间距为3-5px；间距与font(字体、中英文、符号、字号)有关，要看具体情况，比如1区域和2区域同为font-size:25px;但是间距明显不一。

---

原因分析：

由于写代码时标签之间留有空格或者换行，如：

<span class="s1">03月26日</span>
<span class="s2"></span>
<span class="relatv s3">
    管理级线下案例培训第一天
</span>
或者
<span class="s1">02月03日</span> <span class="s2"></span> <span class="relatv s3">111</span>

解决办法：

一、给临近元素均设置margin（需要间距时）

二、html或者模板中代码写在同一行，且之间不要有空格（不需要间距时），如：
<span class="s1">02月03日</span><span class="s2"></span><span class="relatv s3">111</span>

三、元素间需要间距时，也可以在需要设定的元素的margin值的基础上-3或-5（根据字号选择，一般14号左右-3）

---

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。