我想知道如何在不修改 HTML、不使用 JS 的情况下，有没有通过修改 CSS 来解决的方法？

Question

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>

Answer 1

移除代码之间的空白、换行 这样不行吗？

<p><span>hello</span><span>world</span></p>

Answer 2

这个原因跟字体类型和大小有关系。

.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;
}