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

0 0

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

布局 HTML css

11 years, 2 months ago

二次元追随者

二次元追随者 11 years, 2 months ago

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

answered 11 years, 2 months ago

hayzwx

hayzwx answered 11 years, 2 months ago

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

二次元追随者

Answers

hayzwx

Your Answer