消除行内元素和行内块元素的间隙

方法一

给父元素设置字体大小为font-size: 0px;子元素再重新设置字体大小。

<div class="father" style="font-size:0">
    <button>1<button>
    <button>2<button>
    <button>3<button>
</div>

方法二

去掉在代码编写时的换行。例如：

<!--初始DOM-->

<button></button>
<button></button>
<button></button>

<!--去除换行-->
<button></button><button></button><button></button>

方法三

使用margin-right负值（不推荐）

方法四

将其设置成浮动元素。

<div class="father">
    <button style="float:left"></button>
    <button style="float:left"></button>
    <button style="float:left"></button>
</div>

 

 

最后，关于行内元素的补充：

<div class="father">
    <button >1</button>
    <button ></button>
    <button ></button>
</div>

如以上代码，会出现第一个button下沉的情况。原因是文字的基线问题。

可以在每个button加上vertical-align:middle；

或者给其余两个button加上文字。

如果是浮动的话，自然也就不存在这个问题。