您好,匿名用户
随意问技术百科期待您的加入

如何移除相邻两个 display: inline-block 元素间的间隔

0 投票

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 来解决的方法?

用户头像 提问 2012年 12月1日 @ Alistar 上等兵 (326 威望)
分享到:

1个回答

0 投票
 
最佳答案

这个原因跟字体类型和大小有关系。
雅虎 YUI 的解决方法是把letter-spacingword-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;
}
用户头像 回复 2012年 12月1日 @ Kayle 上等兵 (277 威望)
选中 2012年 12月1日 @Alistar
提一个问题:

相关问题

0 投票
1 回复 32 阅读
0 投票
1 回复 34 阅读
0 投票
1 回复 24 阅读
用户头像 提问 2014年 1月30日 @ 爹妈罩我去战斗 上等兵 (131 威望)
0 投票
1 回复 29 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...