当我们将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使你使用（margin:0;padding:0;）也是无法消除的。
先来了解一下它出现的原理。
因为这个换行，导致了这个间隔的出现。
第一种方法：就是大多数人都会想到的将要转换为inline-block的元素写在一起，不换行就行了，虽然这会使代码可读性降低
<div></div><div></div><div></div>
第二种方法：在要转换为inline-block的元素之间加入注释符
<div></div><!--
--><div></div><!--
--><div></div>
第三种方法：将结束标签与下一个开始标签写在一起，这样，他们之间的空格也会被清除掉
<div>
</div><div>
</div><div>
</div>
第四种方法：将元素结束标签的”>“放在下一行的开始处
<div>
</div
><div>
</div
><div>
</div>
HBC5B41A2E3B32A4.jpeg
网友评论