一. 问题
元素是inline-block属性时，会有空白间隙
二. 解决方案
1. html方式
1）将元素之间的空隙去除
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">>A</span><span style="color: #0000ff"></</span><span style="color: #800000">a
</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a
</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>2）省略闭合标签
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">A</font></span><span style="color: #000000">
</span><span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #000000">
</span><span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>2. css方式
1. 使用margin负值（不同浏览器margin-right值可能不一样）
<span style="color: #800000">.space a </span>{<span style="color: #ff0000">
display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000">
margin-right</span>:<span style="color: #0000ff"> -3px</span>;
}2. font-size：0(IE7会有1px的间隙)
<span style="color: #800000">.space </span>{<span style="color: #ff0000">
font-size</span>:<span style="color: #0000ff"> 0</span>;}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
font-size</span>:<span style="color: #0000ff"> 12px</span>;
}3. letter-spacing负值（Opera浏览器最小间距1px，letter-spacing再小就还原了）
<span style="color: #800000">.space </span>{<span style="color: #ff0000">
letter-spacing</span>:<span style="color: #0000ff"> -3px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
letter-spacing</span>:<span style="color: #0000ff"> 0</span>;
}4. word-spacing负值
<span style="color: #800000">.space </span>{<span style="color: #ff0000">
display：inline-table；(为了兼容Chrome)</span><span style="color: #ff0000"> word-spacing</span>:<span style="color: #0000ff"> -6px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
word-spacing</span>:<span style="color: #0000ff"> 0</span>;
}三. inline-block和baseline
https://segmentfault.com/a/1190000002668492
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
894
收藏
