清除inline-black元素间的缝隙

行内块元素间存在一定的空隙,可使用下列方法清除

1 删除两个元素标签间的空白符

<button>测试</button><button>测试</button>

测试测试

2 利用注释

<button>测试</button><!--
--><button>测试</button>

测试测试

3 设置容器属性 font-size: 0

<div style="font-size:0">
	<button style="font-size: 12px">测试</button>
	<button style="font-size: 12px">测试</button>
</div>

测试 测试

4 设置 margin-left:为负值

<div>
	<button>测试</button>
	<button style="margin-left: -4px">测试</button>
</div>

测试
测试

5 利用js写入元素

<div class="test1"></div>
<script>
    var container = document.querySelector('.test1');
    var btn =document.createElement('button');
    btn.textContent = '测试';
    container.appendChild(btn);
    var btn1 = document.createElement('button');
    btn1.textContent = '测试';
    container.appendChild(btn1);
    // 如需保留缝隙,写入元素时在后添加空格
    // container.innerHMTL += ' ';
</script>