css:inline-block 的 div 之间的空隙,原因及解决
display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一 行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。
1、把img标签的display属性改成block:
img{dispaly:block;}
2、把div中的字体大小设为0:
div{font-size:0;}
3、如果是img,修改img的vertical-align属性:
img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}
移除标签间的空格
<ul>
<li>这是一个li</li><li>这是另一个li</li><li>这是另另一个li</li><li>这是另另另一个li</li>
</ul>
// 方式二:在标签结束处消除换行符
<ul>
<li>这是一个li
</li><li>这是另一个li
</li><li>这是另另一个li
</li><li>这是另另另一个li</li>
</ul>
// 方式三:HTML注释标签
<ul>
<li>这是一个li</li><!--
--><li>这是另一个li</li><!--
--><li>这是另另一个li</li><!--
--><li>这是另另另一个li</li>
</ul>