内联（行内）元素间距解决方法

内联（行内）元素

display: inline;

宽高大小由子元素决定，不能手动修改宽高，子元素一般放置文本元素，与其他内联元素并排在同一行

内联元素不能改变宽高，导致有些属性无效，比如：width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。

常用的内联标签：<span>、<img>、<em>、<strong>、<i>

使用内联元素你可能会遇到这种情况，

<div>
    <span style="background: #ccf">内联元素</span>
    <span style="background: #fcc">内联元素</span>
</div>

内联元素之间有空白区域

空白区域的形成是因为<span>之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级<div>的font-size决定。
注意：只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格，文本元素(除空白符)也是属于内联元素。

解决空白区域的方案有以下四种

• 给<div>设置font-size: 0;，在<span>上把font-size设置回去

• 将空白符注释掉

• 把span排列在同一行，并紧贴在一起

• 使用浮动float，有些场合不允许使用浮动，这条就不适用

  ---

此文章是转载于其他博主，如有侵权，请联系删除
转载来源：https://segmentfault.com/a/1190000009139500