css：inline-block 的 div 之间的空隙，原因及解决

最新推荐文章于 2023-09-05 13:26:26 发布

转载最新推荐文章于 2023-09-05 13:26:26 发布 · 771 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.nowcoder.com/issue/tutorial?tutorialId=96&uuid=cd5cb37ff49943699b0636bf53b4c7fd

文章标签：

#前端 #css

当使用display:inline-block布局时，Chrome等浏览器中元素间会因换行符或空格产生间隙。可以通过设置display为block，调整font-size为0，或修改vertical-align属性来消除间隙。此外，还可以通过删除标签间的换行符或使用HTML注释来解决此问题。

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>