行内块元素间距导致变形问题解决及行内元素、块元素、行内块元素总结

行内块元素标签默认间距问题导致样式变形问题

前几天开发中遇到一个布局问题，需求是在已有模块的基础上，点击按钮动态生成一个相同模块，本以为很简单的一个需求，竟被布局间隔问题折磨了大半天才找到原因。
具体效果及代码如下：

要实现的效果

代码如下：

//模板代码

<div class="form-group apply-servel">
    <div class="add-wrap">
        <div class="flow apply-wrap">
            <label for="inputName" class="apply-title">应用服务</label>
            <select class="select-wrap select-wrap-server apply-select">
                <option value="1">应用组1</option>
                <option value="2">应用组2</option>
                <option value="3">应用组3</option>
            </select>
        </div>
        <div class="flow">
            <label class="flow-title">流量</label>
            <div class="flow-text">
                <input type="text" class="apply-flow" id="" name="inputName" value="" placeholder="">
            </div>
            <span class="flow-unit">MB</span>
        </div>
        <div class="flow">
            <label class="flow-title">周期</label>
            <div class="flow-text">
                <input type="text" class="apply-time" id="" name="inputName" value="" placeholder="">
            </div>
            <span class="flow-unit">月</span>
        </div>
        <div class="flow flow-chose">
            <input type="checkbox"  class="apply-chose"> 
            <span>显示</span>
        </div>
    </div>
</div>

//js代码
$('.add-btn').click(function() {
    var html="";
    html = '<div class="add-wrap"><div class="flow apply-wrap"><label for="inputName" class="apply-title">应用服务</label><select class="select-wrap select-wrap-server apply-select">' + optionHtml + '</select></div><div class="flow"><label class="flow-title ">流量</label><div class="flow-text"><input type="text" class="apply-flow" id="" name="inputName" value="" placeholder=""></div><span class="flow-unit">MB</span></div><div class="flow"><label class="flow-title">周期</label><div class="flow-text"><input type="text" class="apply-time" id="" name="inputName" value="" placeholder=""></div><span class="flow-unit">月</span></div><div class="flow flow-chose"><input type="checkbox" class="apply-chose"><span>显示</span></div></div>';
    $('.apply-servel').append(html);

})

可是结果却不尽人意，结果如下：

最开始以为是样式中有浮动或者是定位影响到了，可是排查了几遍也没发现问题，看看代码，看看效果真是百思不得其解，无奈丢在一边先做其他事情。到了晚上回过头来再看这个问题，js的生成标签和模板里的标签到底有什么不同呢？突然灵光乍现， 是标签间间距！！！ 瞬间想起了之前看行内块元素的时候，有说到，行内块元素之间，浏览器会有一个默认间距，可以通过标签在同一行显示来清除。试了一下把标签放在一行显示果真达到了想要的效果。终于找到了问题的根源，小小的问题点关键的时候，还是很容易疏忽的，现在就来总结一下行内块元素默认间距问题解决办法，毕竟放在一行代码可读性不强，看起来也不太简洁。最后查阅文章总结了如下方法，分享给大家。

总结：行内块元素间距解决方法

将所有标签全部放在一行显示，超出一行自动换行。（如例子中js代码写法，可读性比较差）

给行内块元素的父级元素，设置word-spacing为负值，抵消浏览器默加的间距。（一般字体为14，设置-4即可，可根据实际字体大小调整）。

给行内块元素的父级元素设置font-size:0,行内块元素再设置对应的font-size值。(子元素一定要重新设置font-size值，不然你的文字就没啦)

给行内块元素的父级元素设置letter-spacing为负值，行内块元素设置letter-spacing为0。（一般字体为14，设置-4即可，可根据实际字体大小调整）。

给行内块元素设置浮动，这样也不会有间距了。

好啦以上就是行内块元素（display:inline-block），浏览器默认间距问题de解决办法，亲测有效，如果什么问题欢迎提出指正。另外肯定还有其他方法可以实现，大家可以找找看！

延伸扩展

既然聊到了行内元素，那我们就在一起回归一下行内元素、块元素、行内块元素之间的区别和联系

行内元素（display:block）
内容：行内元素只占据它对应标签的边框所包含的空间。
格式：默认情况下，行内元素不会以新行开始。
常见行内元素：span、img、a、label、input、em、i、textarea、select、small、sub、sup，strong...
内容模型：一般情况下，行内元素只能包含数据和其他行内元素。
特性：不可以设置宽（width）、高(height）、行高（line-height）,可以设置内边距(padding)以及左右外边距（margin-left,margin-right);

块级元素（display:inline)
内容：块级元素占据其父元素（容器）的整个空间。
格式：默认情况下，块级元素会新起一行。
常见块级元素：div、p、h1~h6、ul、li、hr、header、section、aside、footer...
内容模型：一般块级元素可以包含行内元素和其他块级元素。
特性：可以设置宽度(width)、高度(height)、内边距(padding)和外边距(margin)

行内块元素（display:inline-block）
行内块元素是一个集两者特性的一类元素，该元素既有行内元素的特性又有块元素的特性，既可以设置宽高、margin、padding,又可以和其他行内元素在一行显示。

注意：
1、行内元素、块元素、行内块元素三者可以通过display属性相互装换。
2、有些元素虽然是行内元素也可以设置宽高比如 img、input、select、textarea、button、label,这些又称为置换元素（属性和行内块元素一致，有兴趣的小伙伴可以自行查阅）