inline-block 的 div 之间的空隙,原因及解决

inline-block 的 div 之间的空隙,原因及解决

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;}

4、移除标签间的空格

<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>

第四个方法明显有点不雅观,而且影响页面代码可观性,不推荐。

有问题反馈加微信:mue233 私聊送一本电子书,绝对受益良多! 微信公众号:慕意,分享创业、使用的软件和教程~
知识星球精选推荐 » inline-block 的 div 之间的空隙,原因及解决