如何移除相邻两个 display: inline-block 元素间的间隔
HTML 如下：
<p>
<span>hello</span>
<span>world</span>
</p>CSS 代码：
span {
display:inline-block;
width:100px;
background:#36c;
color:#fff;
font-size:30px;
text-align:center;
}在页面上他们之间会有一个空格的间隔，我知道只要移除他们之间的空格就显示正常了：
<p>
<span>hello</span><span>world</span>
</p>但我想知道如何在不修改 HTML、不使用 JS 的情况下，有没有通过修改 CSS 来解决的方法？
展开
收起
1
条回答
写回答
写回答
-
IT从业这个原因跟字体类型和大小有关系。
雅虎 YUI 的解决方法是把letter-spacing和word-spacing改成某个负值能解决（不同的字体值不同），ytzong 给了个一劳永逸的解决方法，直接写成 -.5em 或者更大 http://www.99css.com/archives/690.span { letter-spacing: -.5em; /* webkit: collapse white-space between units */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */ }我个人更喜欢通过修改父元素的字体大小，将大小设置为font-size: 0来解决：
p { font-size: 0; }2019-07-17 19:37:06赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
