开发者社区> 问答> 正文

如何移除相邻两个 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 来解决的方法?

展开
收起
杨冬芳 2016-06-14 11:30:30 1899 0
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
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载