如何移除相邻两个 display: inline-block 元素间的间隔-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-03-24 15:24:29 1820 1

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)
  • a123456678
    2019-07-17 19:12:49

    这个原因跟字体类型和大小有关系。
    雅虎 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;
    }
    0 0
相关问答

12

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 66993浏览量 回答数 12

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 58066浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 160101浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96758浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 149070浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148270浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86608浏览量 回答数 23

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 310539浏览量 回答数 251

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81863浏览量 回答数 13

15

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 69721浏览量 回答数 15
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载